2個不同的Bootstrap傳送帶的共存

Question

我的問題是，我想基於Bootstrap共存2個不同的傳送帶。

一個是簡單的：

<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"> 

     <!-- Carousel items --> 
     <div class="carousel-inner"> 
      <div class="active item"> 
       <img src="Images/pub.png"> 
      </div> 
      <div class="item"> 
       <img src="Images/pub.png"> 
      </div> 
      <div class="item"> 
       <img src="Images/pub.png"> 
      </div> 
     </div> 
     <!-- Carousel nav --> 
     <a class="carousel-control left" href="#myCarousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
    </div> 

的，另外，有4個項目在一幀顯示：

<div class="carousel slide" id="myCarousel2"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <li class="col-lg-3"> 
        <div class="center-block"></div> 
       </li> 
      </div> 
      <div class="item"> 
       <li class="col-lg-3"> 
        <div class="center-block"></div> 
       </li> 
      </div> 
      <div class="item"> 
       <li class="col-lg-3"> 
        <div class="center-block"></div> 
       </li> 
      </div> 
      <div class="item"> 
       <li class="col-lg-3"> 
        <div class="center-block"></div> 
       </li> 
      </div> 
      <div class="item"> 
       <li class="col-lg-3"> 
        <div class="center-block"></div> 
       </li> 
      </div> 
      <div class="item"> 
       <li class="col-lg-3"> 
        <div class="center-block"></div> 
       </li> 
      </div> 
      <div class="item"> 
       <li class="col-lg-3"> 
        <div class="center-block"></div> 
       </li> 
      </div> 
      <div class="item"> 
       <li class="col-lg-3"> 
        <div class="center-block"></div> 
       </li> 
      </div> 
     </div> 
     <a class="left carousel-control" href="#myCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
     <a class="right carousel-control" href="#myCarousel2" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 
    </div> 
</div> 

myCarousel2像如果u點擊一個V形，只有一個項目幻燈片：

$('#myCarousel2').carousel({ 
    interval: 4000 
    }) 

$('.carousel .item').each(function(){ 
    var next = $(this).next(); 
    if (!next.length) { 
     next = $(this).siblings(':first'); 
    } 
    next.children(':first-child').clone().appendTo($(this)); 

    for (var i=0;i<2;i++) { 
     next=next.next(); 
     if (!next.length) { 
      next = $(this).siblings(':first'); 
     } 

     next.children(':first-child').clone().appendTo($(this)); 
    } 
}); 

這是第二個輪播的css，它使用Bootstrap和一個修改版本：

.carousel-inner .active.left { left: -25%; } 
    .carousel-inner .next  { left: 25%; } 
    .carousel-control.left,.carousel-control.right {background-image:none;} 

這樣做，第一個輪播如同第二個輪播。我認爲這是由2個傳送帶使用的引導類引起的衝突，所以我嘗試通過創建新的類來指定第一個傳送帶，但與Bootstrap具有相同的屬性，並且失敗。

有人有想法嗎？

謝謝！

Answer 1

我想你沒有正確地選擇第二傳送帶...

Bootply：http://www.bootply.com/nALoYV9bHB

的CSS：

#myCarousel2 .carousel-inner .active.left { left: -25%; } 
#myCarousel2 .carousel-inner .next  { left: 25%; } 
#myCarousel2 .carousel-control.left,.carousel-control.right {background-image:none;} 

JS：

$('#myCarousel2').carousel({ 
     interval: 4000 
     }) 

    $('#myCarousel2.carousel .item').each(function(){ 
     var next = $(this).next(); 
     if (!next.length) { 
      next = $(this).siblings(':first'); 
     } 
     next.children(':first-child').clone().appendTo($(this)); 

     for (var i=0;i<2;i++) { 
      next=next.next(); 
      if (!next.length) { 
       next = $(this).siblings(':first'); 
      } 

      next.children(':first-child').clone().appendTo($(this)); 
     } 
    });