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>

但如果

中要嵌套轮播的话，现有的代码就会出问题，因为javascript中的事件绑定中，选择元素使用了find方法，初始化时第一层id为CarouselId的轮播容器选择class为item时将item里面嵌套的item也选取了，同样选取所有class为carousel-indicators的子元素时也嵌套选取，需要手动修改用children选择第一级子元素。

Bootstrap嵌套轮播

标签：

原文地址：http://www.cnblogs.com/sofing/p/bootstrap-nest-carousel.html