旋轉木馬 - 單個圖像滑動顯示錯誤。它的滑動滑塊

Question

我使用縮略圖旋轉木馬 - 單張圖片滑動here，我複製完整滑塊並將其添加到我的網站，但現在它滑動所有圖像。我的網站完整的代碼在這裏，併爲更多的觀點訪問Here

我想一次只滑動一個，但當我在我的網站上添加它的滾動全滑塊一次然後顯示下一張幻燈片幫助我！

$(document).ready(function() { 
 
    $('#myCarousel').carousel({ 
 
     interval: 1000 
 
    }) 
 
    $('.fdi-Carousel .item').each(function() { 
 
     var next = $(this).next(); 
 
     if (!next.length) { 
 
      next = $(this).siblings(':first'); 
 
     } 
 
     next.children(':first-child').clone().appendTo($(this)); 
 

 
     if (next.next().length > 0) { 
 
      next.next().children(':first-child').clone().appendTo($(this)); 
 
     } 
 
     else { 
 
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
 
     } 
 
    }); 
 
});

.carousel-inner.onebyone-carosel { margin: auto; width: 90%; } 
 
.onebyone-carosel .active.left { left: -33.33%; } 
 
.onebyone-carosel .active.right { left: 33.33%; } 
 
.onebyone-carosel .next { left: 33.33%; } 
 
.onebyone-carosel .prev { left: -33.33%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://knowy.co.in/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://www.knowy.co.in/js/bootstrap.min.js"></script> 
 
<div id="myCarousel" class="carousel fdi-Carousel slide"> 
 
<!-- Carousel items --> 
 
    <div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0"> 
 
     <div class="carousel-inner onebyone-carosel"> 
 
      <div class="item active"> 
 
       <div class="col-md-4"> 
 
        <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> 
 
        <div class="text-center">1</div> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <div class="col-md-4"> 
 
        <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> 
 
        <div class="text-center">2</div> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <div class="col-md-4"> 
 
        <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> 
 
        <div class="text-center">3</div> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <div class="col-md-4"> 
 
        <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> 
 
        <div class="text-center">4</div> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <div class="col-md-4"> 
 
        <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> 
 
        <div class="text-center">5</div> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <div class="col-md-4"> 
 
        <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a> 
 
        <div class="text-center">6</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <a class="left carousel-control" href="#eventCarousel" data-slide="prev"></a> 
 
     <a class="right carousel-control" href="#eventCarousel" data-slide="next"></a> 
 
    </div> 
 
    <!--/carousel-inner--> 
 
</div><!--/myCarousel-->

Answer 1

您使用哪種引導的版本？在版本3.3.1之後，傳送帶爲動畫使用CSS變換。看到這個答案：Bootstrap carousel multiple frames at once