如何解决这个轮播控制位置问题？

问题描述 投票：0回答：1

我创建了一个 html 页面来测试 bootstrap 5 轮播。它显示多个项目，并在幻灯片图像之外具有上一个和下一个控件。这些控件使用 bootstrap 提供的 glyphicon-chevron-left 和 glphicon-chevron-right。 CSS 用于指定控制位置。我遇到了无法正确定位“下一个”控件的问题。它实际上显示在第一张幻灯片上，而不是最后一张幻灯片的右侧，距离上一张控件不远。我应该如何更改CSS样式来解决这个问题？

这是我的测试程序：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Modymix Website Prototype</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <style>
    @media (max-width: 767px)
    {
        .carousel-inner .carousel-item >div
        {
            display: none
        }
        .carousel-inner .carousel-item >div:first-child
        {
            display: block
        }
    }
    
    .carousel-inner .carousel-item.active, .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev
    {
        display: flex
    }
    
    @media (min-width: 768px)
    {
        .carousel-inner .carousel-item-end.active, .carousel-inner .carousel-item-next
        {
            transform: translateX(25%)
        }
        
        .carousel-inner .carousel-item-start.active, .carousel-inner .carousel-item-prev
        {
            transform: translateX(-25%)
        }
    }
    
    .carousel-inner .carousel-item-end, .carousel-inner .carousel-item-start
    {
        transform: translateX(0)
    }

    .carousel-control-next-icon 
    {
        right: -30px;
    }

    .carousel-control-prev-icon
    {
        right: -30px;
    }

    /* Adjusted control positioning and styling */
    .carousel-control-prev,
    .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }  
    .carousel-control-prev, .glyphicon glyphicon-chevron-left  {
        left: -75px;
    }

    .carousel-control-next, .glyphicon glyphicon-chevron-right {
        right: -75px;
    }

    .card 
    {
        border-style: none;
    }
  </style>
</head>

<body>
<div class="container text-center my-3"> 
    <h2 class="font-weight-light mb-3">Learning Center Category List</h2> 
    <div class="row mx-auto my-auto justify-content-center"> 

        <div id="recipeCarousel" class="carousel slide" > 
            <div class="carousel-inner" role="listbox">             
                <div class="carousel-item active">  
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img text-center"> 
                                <img src="/images/learning/HealthDieNoBackgroundt0911-2023.jpg" 
                                 width="250" height="96"> 
                            </div> 
                            <!-- <div class="card-img-overlay">Slide 1</div>                         -->
                        </div> 
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/carbManagementNoBackground911-2023.jpg"
                                width="250" height="96"> 
                            </div> 
                            <!-- <div class="card-img-overlay">Slide 2</div>  -->
                        </div> 
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/knowDiabetesCatalog.png" 
                                   width="250" height="96" > 
                            </div> 
                            <!-- <div class="card-img-overlay">Slide 3</div>  -->
                        </div> 
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/ResearchUpdateNobackground0911-2023.jpg" 
                                width="250" height="96" > 
                            </div> 
                            <!-- <div class="card-img-overlay">Slide 4</div>  -->
                        </div> 
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/LearningCatalog_new.jpg" 
                                    width="250" height="96"> 
                            </div> 
                            <div class="card-img-overlay fw-bold" style="color: white"">Catalog 5</div> 
                        </div>
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/LearningCatalog_new.jpg" 
                                    width="250" height="96"> 
                            </div> 
                            <div class="card-img-overlay fw-bold" style="color: white">Catalog 6</div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            
            <a class="carousel-control carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" 
                role="button" data-bs-slide="prev">
                <span class="glyphicon glyphicon-chevron-left " aria-hidden="true" 
                    style="color: black; font-size: 25px;"></span>
            </a> 
            
            <a class="carousel-control carousel-control-next bg-transparent w-aut" href="#recipeCarousel" 
                role="button" data-bs-slide="next">
                <span class="glyphicon glyphicon-chevron-right " aria-hidden="true" 
                    style="color: black; font-size: 25px;"></span>
            </a> 
        </div> 
    </div> 

    <h5 class="mt-3 fw-light">advances one slide at a time</h5>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
  integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <script>
    // carousel jquery script
    let items = document.querySelectorAll('.carousel .carousel-item')

    items.forEach((el) => {
        const minPerSlide = 4
        let next = el.nextElementSibling
        for (var i=1; i<minPerSlide; i++) {
            if (!next) {
                // wrap carousel by using first child
                next = items[0]
            }
            let cloneChild = next.cloneNode(true)
            el.appendChild(cloneChild.children[0])
            next = next.nextElementSibling
        }
    })
  </script> 
</html>
html carousel bootstrap-5 webusercontrol
1个回答
0
投票

您调整的控件定位样式没有任何效果，因为它被引导样式覆盖。唯一有效果的是 

transform: translateY(-50%);
如果您想让 V 形垂直居中，则不需要它。目前他们将它们拉到传送带的顶部。

要修复此临时问题，您可以将 

left: auto
添加到 
carousel-control carousel-control-next

查看下面添加的代码片段的 CSS 部分。我注释掉了您的调整并在底部添加了一行。

顺便说一句：

您包含 2 个版本的 bootstrap：

  1. https://cdn.jsdelivr.net/npm/[电子邮件受保护]/dist/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css

你可以解决这个问题。 

 // carousel jquery script
    let items = document.querySelectorAll('.carousel .carousel-item')

    items.forEach((el) => {
        const minPerSlide = 4
        let next = el.nextElementSibling
        for (var i=1; i<minPerSlide; i++) {
            if (!next) {
                // wrap carousel by using first child
                next = items[0]
            }
            let cloneChild = next.cloneNode(true)
            el.appendChild(cloneChild.children[0])
            next = next.nextElementSibling
        }
    })
@media (max-width: 767px)
    {
        .carousel-inner .carousel-item >div
        {
            display: none
        }
        .carousel-inner .carousel-item >div:first-child
        {
            display: block
        }
    }
    
    .carousel-inner .carousel-item.active, .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev
    {
        display: flex
    }
    
    @media (min-width: 768px)
    {
        .carousel-inner .carousel-item-end.active, .carousel-inner .carousel-item-next
        {
            transform: translateX(25%)
        }
        
        .carousel-inner .carousel-item-start.active, .carousel-inner .carousel-item-prev
        {
            transform: translateX(-25%)
        }
    }
    
    .carousel-inner .carousel-item-end, .carousel-inner .carousel-item-start
    {
        transform: translateX(0)
    }

    .carousel-control-next-icon 
    {
        right: -30px;
    }

    .carousel-control-prev-icon
    {
        right: -30px;
    }

    /* Adjusted control positioning and styling */
    
    /* Doesn't have any effect other than the transform
    .carousel-control-prev,
    .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }  
    .carousel-control-prev, .glyphicon glyphicon-chevron-left  {
        left: -75px;
    }

    .carousel-control-next, .glyphicon glyphicon-chevron-right {
        right: -75px;
    }
    */
    
    .card 
    {
        border-style: none;
    }
    
    
    /* Fixes the issue */
  
    .carousel-control.carousel-control-next {
        left: auto;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Modymix Website Prototype</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <style>
    
  </style>
</head>

<body>
<div class="container text-center my-3"> 
    <h2 class="font-weight-light mb-3">Learning Center Category List</h2> 
    <div class="row mx-auto my-auto justify-content-center"> 

        <div id="recipeCarousel" class="carousel slide" > 
            <div class="carousel-inner" role="listbox">             
                <div class="carousel-item active">  
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img text-center"> 
                                <img src="/images/learning/HealthDieNoBackgroundt0911-2023.jpg" 
                                 width="250" height="96"> 
                            </div> 
                            <!-- <div class="card-img-overlay">Slide 1</div>                         -->
                        </div> 
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/carbManagementNoBackground911-2023.jpg"
                                width="250" height="96"> 
                            </div> 
                            <!-- <div class="card-img-overlay">Slide 2</div>  -->
                        </div> 
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/knowDiabetesCatalog.png" 
                                   width="250" height="96" > 
                            </div> 
                            <!-- <div class="card-img-overlay">Slide 3</div>  -->
                        </div> 
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/ResearchUpdateNobackground0911-2023.jpg" 
                                width="250" height="96" > 
                            </div> 
                            <!-- <div class="card-img-overlay">Slide 4</div>  -->
                        </div> 
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/LearningCatalog_new.jpg" 
                                    width="250" height="96"> 
                            </div> 
                            <div class="card-img-overlay fw-bold" style="color: white"">Catalog 5</div> 
                        </div>
                    </div> 
                </div> 
                
                <div class="carousel-item"> 
                    <div class="col-md-3"> 
                        <div class="card"> 
                            <div class="card-img"> 
                                <img src="/images/learning/LearningCatalog_new.jpg" 
                                    width="250" height="96"> 
                            </div> 
                            <div class="card-img-overlay fw-bold" style="color: white">Catalog 6</div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            
            <a class="carousel-control carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" 
                role="button" data-bs-slide="prev">
                <span class="glyphicon glyphicon-chevron-left " aria-hidden="true" 
                    style="color: black; font-size: 25px;"></span>
            </a> 
            
            <a class="carousel-control carousel-control-next bg-transparent w-aut" href="#recipeCarousel" 
                role="button" data-bs-slide="next">
                <span class="glyphicon glyphicon-chevron-right " aria-hidden="true" 
                    style="color: black; font-size: 25px;"></span>
            </a> 
        </div> 
    </div> 

    <h5 class="mt-3 fw-light">advances one slide at a time</h5>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
  integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script>
   
  </script> 
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.