Bootstrap carousel move single item in one click

Answer 1

Working Fiddle

I was having the same problem, and I got it to only slide by one item at a time by adding this code to the css:

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

Try this: 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



  

    

      

    
    

      

    
    

      

    
    

      

    
    

      

    
    

      

    
    

      

    
    

      

    
  
  
  

You can also make the transition smoother by adding transition: all 500ms ease-out; to your css.

Fiddle here: http://jsfiddle.net/eaae76kx/98/