旋转木马 - 单个图像滑动显示错误。它的滑动滑块

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