使用bootstrap導航多個傳送帶物品3

-1

如何使傳送帶物品與引導程序3一起導航爲一組？我們怎樣才能讓多個項目在點擊時移動，而不是一次移動一個項目。對於例如如果我看到幻燈片1,2,3，則下一個輪播控件應顯示幻燈片4,5,6。使用bootstrap導航多個傳送帶物品3

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

    <div class="carousel-inner"> 
    <div class="item active"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture1.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture2.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture3.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture4.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture5.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture2.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture4.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-xs-3"><a href="#"><img src="images\link4\Picture3.png" class="img-responsive"></a></div> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 

<script> 
$('.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>0) { 
    next.children(':first-child').clone().appendTo($(this)); 
    } 
    else { 
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
    } } 
}); 
</script>

來源

2017-04-04 Reshma

帖子到目前爲止你已經嘗試過的代碼。這只是將幻燈片放在一個項目中的問題：http://www.bootply.com/lFBj86irDS – ZimSystem

浪費了我的時間在這上面得到它的工作。想不到這一點。真誠感謝您對此的幫助。非常感謝Zim。 – Reshma

有沒有必要額外的JS。只需使用標準引導旋轉木馬......

<div class="carousel-inner"> 
     <div class="item active"> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
      <div class="col-xs-3"> 
       <a href="#"><img src="//placehold.it/400" class="img-responsive"></a> 
      </div> 
     </div> 
    </div>

http://www.codeply.com/go/Vnvl4HqgKJ

來源

2017-04-05 11:34:48 ZimSystem

是啊，不需要腳本。謝謝你的例子。 – Reshma

我該如何接受答案？有什麼鏈接嗎？對不起，我是這個論壇的新手。請指導。 – Reshma

答案接受。 – Reshma

使用bootstrap導航多個傳送帶物品3

回答

相關問題