Question

我创建了一个Bootstrap轮播并单击指示符会更改当前幻灯片，但不会将幻灯片的类更改为活动，这意味着指示符永远不会更改。

<body>
    <div class="container">
        <div class="row">
            <div class="#">
                <div id="my-slider" class="carousel slide container" data-ride="carousel">

                    <!--indicators dot nav-->
                    <ol class="carousel-indicators">
                        <li data-target="#my-slider" data-slide-to="0" class="active"></li>
                        <li data-target="#my-slider" data-slide-to="1"></li>
                        <li data-target="#my-slider" data-slide-to="2"></li>
                    </ol>
                    <!--wrapper for slides-->
                    <div class="carousel-inner" role="listbox">
                        <div class="item one active">
                            <img src="images/IMG_6737.png" alt="The Shard" />
                        </div>

                        <div class="item two">
                            <img src="images/IMG_6630.png" alt="A London Barbers" />
                        </div>

                        <div class="item three">
                            <img src="images/IMG_6659.png" alt="A London Bar"/>
                        </div>      
                    </div>               
                </div>    
            </div>    
        </div>  
    </div> 
 </body>

CSS：

*{
margin: 0;
padding: 0;
}
.carousel {z-index: -99;}
.carousel .item{
    position: fixed;
    width: 100%; height: 100%;
}
.carousel .one {
    background: url(images/IMG_6737.png);
    background-size: cover;    
    background-repeat: no-repeat;
}
.carousel .two {
    background: url(images/IMG_6630.png);
    background-size: cover;  
    background-repeat: no-repeat;
}
.carousel .three {
    background: url(images/IMG_6630.png);
    background-size: cover;  
    background-repeat: no-repeat;
}
.carousel .active .left{
    left:0;
    opacity: 1;
}

.carousel-indicators {
    position: fixed;
    top:0;
    float: left;
    padding-bottom: 50px;
    z-index: 30;
    margin-top: 40px;
}

.carousel-indicators li{
    width: 30px;
    height: 30px;
    border-radius: 1;
    margin: 0 10px;
    border-radius: 100%;
}
.carousel-indicators .active{
    width: 30px;
    height: 30px;
    margin: 0 10px;

}

活动指示符应该是唯一已填充的指示符，其余指标应该是空心的，这不会发生，因为单击活动后的列表项类别在单击后没有更改。

Answer 1

使用class =“＃”删除div

不要忘记在bootstrap.js文件之前包含jQuery。

这是我用你的代码制作的笔。 pen example http://codepen.io/stojko/pen/NpJOEZ

Answer 2

您可以查看下面给出的Bootstrap轮播链接：

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h

Bootstrap Carousel活动类不变

2 个答案: