Bootstrap carousel只需单击一下即可移动单个项目

我有这个旋转木马

$('#myCarousel').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)); } }); 

 .carousel-inner .active.left { left: -25%; } .carousel-inner .next { left: 25%; } .carousel-inner .prev { left: -25%; } .carousel-control { width: 4%; } .carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;} 

    
Bootstrap 3 Multiple Slide Carousel
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   
  

https://jsfiddle.net/r5twtm22/

这工作正常。

我需要一次只移动单个图像。 它移动所有4个图像..

Answer 1

由于某种原因，代码段没有显示确切的结果。 请检查小提琴

FIDDLE （清洁和工作版）

 $('#myCarousel').carousel({ interval: 10000 }) $('.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)); } }); 

 #myCarousel .carousel-inner .active.left { left: -33%; } #myCarousel .carousel-inner .active.right { left: 33%; } #myCarousel .carousel-inner .next { left: 33%; } #myCarousel .carousel-inner .prev { left: -33%; } #myCarousel .carousel-control.left { background-image: none; } #myCarousel .carousel-control.right { background-image: none; } #myCarousel .carousel-inner .item { background: white; transition: all ease .5s; } 

    
 
 
 
    
 
 
 
    
 
 
 
    
 
 
 
    
 
 
 
    
 
 
 
    
 
 
    Previous    Next   

Answer 2

工作小提琴

我遇到了同样的问题，我通过将此代码添加到css中，一次只能滑动一个项目：

 #myCarousel .carousel-inner .item { background: white; /*transition: transform;*/ transition: all 500ms ease-out; /* transition is added here */ } 

试试这个：JS：

 $('#myCarousel').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：

 .carousel-inner .active.left { left: -25%; } .carousel-inner .next { left: 25%; } .carousel-inner .prev { left: -25%; } .carousel-control { width: 4%; } .carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;} #myCarousel .carousel-inner .item { background: white; /*transition: transform;*/ transition: all 500ms ease-out; /* transition is added here */ } 

HTML：

           
Product Carousel
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   
 
      

您还可以通过添加transition: all 500ms ease-out;使转换更顺畅transition: all 500ms ease-out; 对你的CSS。

在这里小提琴： http ： //jsfiddle.net/eaae76kx/98/