多個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傳送帶類控制

回答

相關問題