Bootstrap：为什么使用bootstrap在一个页面同时做两个轮播效果时，只有第一个有效？？
我们都知道使用bootstrap做轮播效果非常快，但是有时候一个页面会需要两个轮播；但这个时候再次使用bootstrap做轮播效果时就会失效；原因在于bootstrap的Carousel问题，只要修改一下id，就好了~~
这是第一个轮播：（未做修改）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<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> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="./zt-img/lb1.jpg" alt="First slide" height="400px" width="100%"> </div> <div class="item"> <img src="./zt-img/lb3.jpg" alt="Third slide" width="100%"> </div> <div class="item"> <img src="./zt-img/lb4.jpg" alt="Second slide" width="100%"> </div> <div class="item"> <img src="./zt-img/lb5.jpg" alt="Third slide" width="100%"> </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> <!--id="myCarousel"--> |
这是第二个轮播：（已修改）
1. 修改轮播动画的id属性
id="myCarousel"改为 id="myCarousela" |
2. 修改ol li 内的data-target属性为你修改后的id
|
1
|
全部的data-target="#myCarousel" 改为 data-target="#myCarousela" |
3. 修改a标签的href属性为#修改后的id
全部的href="#myCarousel"改为href="#myCarousela"
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<div id="myCarousela" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#myCarousela" data-slide-to="0" class="active"></li> <li data-target="#myCarousela" data-slide-to="1"></li> <li data-target="#myCarousela" data-slide-to="2"></li> <li data-target="#myCarousela" data-slide-to="3"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"> <img src="./zt-img/lb1.jpg" alt="First slide" height="400px" width="100%"> </div> <div class="item"> <img src="./zt-img/lb3.jpg" alt="Third slide" width="100%"> </div> <div class="item"> <img src="./zt-img/lb4.jpg" alt="Second slide" width="100%"> </div> <div class="item"> <img src="./zt-img/lb5.jpg" alt="Third slide" width="100%"> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="#myCarousela" data-slide="prev"></a> <a class="carousel-control right" href="#myCarousela" data-slide="next"></a> </div> <!--id="myCarousel"--> |
id="myCarousel"改为 id="myCarousela"
