多个twitter Bootstrap传送带类控制

我想在一个页面上设置多个twitter引导程序传送带，但我不想使用不同的ID，因为后面我会动态创建这些传送带。我的问题是，通过按下第一个轮播中的按钮，我可以控制所有这些按钮。我无法弄清楚如何正确解决元素。如何设置此代码以便我可以分别控制每个轮播，使用类而不是ID？多个twitter Bootstrap传送带类控制

jsfidle： http://jsfiddle.net/RobRalph/shk63x3g/1/

HTML：

<body> 

<!-- 1st carousel test --> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="carousel slide" data-interval="false"> 
      <div class="carousel-inner"> 
       <div class="backview"></div> 
       <ol class="carousel-indicators" > 
        <li data-target = ".carousel" data-slide-to = "0" class="active"></li> 
        <li data-target = ".carousel" data-slide-to = "1"></li> 
        <li data-target = ".carousel" data-slide-to = "2"></li> 
       </ol> 

       <!-- carousel first page --> 
       <div class="item active"> 
        <div class = "headeritem"> 
        </div> 
        <div class = "bodyitem"> 
        </div> 

        <div class = "carousel-caption"> 
         <h3>1</h3> 
         <p>Lorum ipsum</p> 

        </div> 


       </div> 

       <!-- carousel second page --> 
       <div class="item"> 
        <div class = "headeritem"> 
        </div> 
        <div class = "bodyitem"> 
        </div> 

        <div class = "carousel-caption"> 
         <h3>2</h3> 
         <p>Lorum ipsum</p> 
        </div> 
       </div> 

       <!-- carousel third page --> 
       <div class="item"> 
        <div class = "headeritem"> 
        </div> 
        <div class = "bodyitem"> 
        </div> 

        <div class = "carousel-caption"> 
         <h3>3</h3> 
         <p>Lorum ipsum</p> 
        </div> 
       </div> 
      </div> 

      <a class = "carousel-control left" href = ".carousel" data-slide = "prev"> 
      <span class = "icon-prev"></span> 
      </a> 
      <a class = "carousel-control right" href = ".carousel" data-slide = "next"> 
      <span class = "icon-next"></span> 
      </a> 


     </div> 
     </div> 
    </div> 
</div> 

<!-- 2nd carousel test --> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="carousel slide" data-interval="false"> 
      <div class="carousel-inner"> 
       <div class="backview"></div> 
       <ol class="carousel-indicators" > 
        <li data-target = ".carousel" data-slide-to = "0" class="active"></li> 
        <li data-target = ".carousel" data-slide-to = "1"></li> 
        <li data-target = ".carousel" data-slide-to = "2"></li> 

       </ol> 

       <!-- carousel first page --> 

       <div class="item active"> 

        <div class = "headeritem"> 
        </div> 
        <div class = "bodyitem"> 
        </div> 


        <div class = "carousel-caption"> 
         <h3>1</h3> 
         <p>Lorum ipsum</p> 

        </div> 


       </div> 

       <!-- carousel second page --> 
       <div class="item"> 
        <div class = "headeritem"> 
        </div> 
        <div class = "bodyitem"> 
        </div> 

        <div class = "carousel-caption"> 
         <h3>2</h3> 
         <p>Lorum ipsum</p> 
        </div> 
       </div> 

       <!-- carousel third page --> 
       <div class="item"> 
        <div class = "headeritem"> 
        </div> 
        <div class = "bodyitem"> 
        </div> 

        <div class = "carousel-caption"> 
         <h3>3</h3> 
         <p>Lorum ipsum</p> 
        </div> 
       </div> 
      </div> 

      <a class = "carousel-control left" href = ".carousel" data-slide = "prev"> 
      <span class = "icon-prev"></span> 
      </a> 
      <a class = "carousel-control right" href = ".carousel" data-slide = "next"> 
      <span class = "icon-next"></span> 
      </a> 
     </div> 
     </div> 
    </div> 
</div>

额外的CSS：

.backview { 
position:absolute; 
top:0; 
z-index:-99; 
height:100%; 
width:100%; 

background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://scontent.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/p480x480/10408976_1175768429116191_8145612220139098697_n.jpg?oh=45022b3bbf32769af5bf339f40cb2cb1&oe=55F527C3') no-repeat center center; 
background-size:cover; 

} 


.headeritem { 
    height:80px;  

} 

.bodyitem { 
    height:140px; 

}

来源

2015-06-22 RobRalph

我想你会需要使用不同的ID，当你动态创建它们，你也应该指定t清除不同的ID。

这里是一个工作Bootply演示两个转盘：http://www.bootply.com/04KMcAK0w4

您将需要使用的ID在两个位置。

在转盘指标（子弹）作为数据属性的值称为数据目标：

<li data-target="#myCarousel1" data-slide-to="0" class="active"></li>

而就前进和后退按钮作为HREF的值：

<a class="left carousel-control" href="#myCarousel1" data-slide="prev">

来源

2015-06-22 00:27:14

si除非我修改bootstrap.js，否则不可能使用Class？我很害怕它会来的ID，我想我会看看如何动态添加特定的ID，不应该太糟糕了 – RobRalph

多个twitter Bootstrap传送带类控制

回答

相关问题