為什么使用bootstrap在一個頁面同時做兩個輪播效果時，只有第一個有效？？

我們都知道使用bootstrap做輪播效果非常快，但是有時候一個頁面會需要兩個輪播；但這個時候再次使用bootstrap做輪播效果時就會失效；原因在於bootstrap的Carousel問題，只要修改一下id，就好了~~

這是第一個輪播：（未做修改）

	<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

全部的data-target="#myCarousel" 改為 data-target="#myCarousela"

3. 修改a標簽的href屬性為#修改后的id

全部的href="#myCarousel"改為href="#myCarousela"

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