Question

如何解决bootstrap轮播不能重复使用的问题

<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="images/base1.png" alt="First slide">
</div>
<div class="item">
<img src="images/base1.png" alt="Second slide">
</div>
<div class="item">
<img src="images/base1.png" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
一个页面有两个轮播只有第一个有用

Answer 1

事实上，Bootstrap 轮播是绑定class=carousel运行的。

$('.carousel').carousel();//

所以，多轮播只要区分ID就好了。

比如，上面的代码复制两份---即一个页面两个轮播。其中一段代码不变。另一端修id=myCarousel222，(共六处，五个是href="#myCarousel222")

就可以运行通过