title: Bootstrap carousel move single item in one click
body: <p>I have this carousel </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#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&lt;2;i++) {
      next=next.next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
  
      next.children(':first-child').clone().appendTo($(this));
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="col-md-12 text-center"&gt;&lt;h3&gt;Bootstrap 3 Multiple Slide Carousel&lt;/h3&gt;&lt;/div&gt;
  &lt;div class="col-md-6 col-md-offset-3"&gt;
    &lt;div class="carousel slide" id="myCarousel"&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="item active"&gt;
          &lt;div class="col-xs-3"&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/500/e499e4/fff&amp;amp;text=1" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;div class="col-xs-3"&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/500/e477e4/fff&amp;amp;text=2" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;div class="col-xs-3"&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/500/eeeeee&amp;amp;text=3" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;div class="col-xs-3"&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/500/f4f4f4&amp;amp;text=4" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;div class="col-xs-3"&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/500/f566f5/333&amp;amp;text=5" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;div class="col-xs-3"&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/500/f477f4/fff&amp;amp;text=6" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;div class="col-xs-3"&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/500/eeeeee&amp;amp;text=7" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;div class="col-xs-3"&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/500/fcfcfc/333&amp;amp;text=8" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;&lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;&lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/r5twtm22/" rel="nofollow">https://jsfiddle.net/r5twtm22/</a></p>
  
  <p>this is working fine.</p>
  
  <p>I need to move only single image at once. Its moving all 4 images .. </p>