Bootstrap Carousel 活动类不改变答案

【问题标题】：Bootstrap Carousel active class not changingBootstrap Carousel 活动类不改变
【发布时间】：2017-04-04 10:46:40
【问题描述】：

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

<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;

}

活动指示器应该是唯一被填充的指示器，其余的应该是空的。这不会发生，因为活动的列表项类在被点击后没有改变。

【问题讨论】：

你能提供一个有效的 jsfiddle 或 codepen 演示吗？如果你能做到，我可以帮你。
先生，请告诉我，您使用的是什么版本的引导程序或 JQuery 文件？
它在小提琴上工作正常。 here

标签： html css bootstrap-carousel

【解决方案1】：

用 class="#" 删除 div

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

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

【讨论】：

它的工作原理没有任何改变小提琴：P，here

【解决方案2】：

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

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

【讨论】：