我创建了一个 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;
}
事件指示器应该是唯一被填充的指示器，其余的指示器应该是空心的。这种情况不会发生，因为事件的列表项类在单击后不会改变。
最佳答案
删除带有 class="#"的 div
不要忘记在 bootstrap.js 文件之前包含 jQuery。
这是我用你的代码制作的笔。
笔示例 http://codepen.io/stojko/pen/NpJOEZ
关于html - Bootstrap Carousel 事件类没有改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43205036/