Bootstrap嵌套輪播

標籤：

Bootstrap的輪播通過以下層次的html代碼實現：

<div class="carousel slide" id="CarouselId">
　　<div class="carousel-inner">
　　　　<div class="item">

　　　　　　<div class="carousel slide" id="CarouselId1">

　　　　　　　　<div class="carousel-inner">

　　　　　　　　　　<div class="item">第二層容器第一幀的內容</div>
　　　　　　　　　　<div class="item">第一層容器第二幀的內容</div>

　　　　　　　　　　……

　　　　　　　　</div>

　　　　　　　　<ol class="carousel-indicators">
　　　　　　　　　　<li class="active" data-slide-to="0" data-target="#CarouselId1"></li>
　　　　　　　　　　<li data-slide-to="1" data-target="#CarouselId1"></li>
　　　　　　　　　　<li data-slide-to="2" data-target="#CarouselId1"></li>

　　　　　　　　　　……
　　　　　　　　</ol> 

　　　　　　　　<a data-slide="prev" class="left carousel-control" href="#CarouselId1"></a>
　　　　　　　　<a data-slide="next" class="right carousel-control" href="#CarouselId1"></a>

　　　　　　</div>

　　　　</div>
　　　　<div class="item">第一層容器第一幀的內容</div>
　　　　<div class="item">第一層容器第二幀的內容</div>

　　　　……

　　</div>

　　<ol class="carousel-indicators">
　　　　<li class="active" data-slide-to="0" data-target="#CarouselId"></li>
　　　　<li data-slide-to="1" data-target="#CarouselId1"></li>
　　　　<li data-slide-to="2" data-target="#CarouselId1"></li>

　　　　……
　　</ol> 

　　<a data-slide="prev" class="left carousel-control" href="#CarouselId"> </a>
　　<a data-slide="next" class="right carousel-control" href="#CarouselId"> </a>
</div>

但如果

 <div class="item"></div>

中要嵌套輪播的話，現有的代碼就會出問題，因為javascript中的事件綁定中，選擇元素使用了find方法，初始化時第一層id為CarouselId的輪播容器選擇class為item時將item裡面嵌套的item也選取了，同樣選取所有class為carousel-indicators的子項目時也嵌套選取，需要手動修改用children選擇第一級子項目。

Bootstrap嵌套輪播