title: Bootstrap: Slide only one image among the multiple images in an item of the carousel
body: <p>I am implementing the Bootstrap Carousel for making view multiple image thumbnail (4 images) in each carousel item. When I click on the next or prev control then it should slide only 1 image out of 4. How can I achieve this.</p>
  
  <p>I already tried this example <a href="http://www.bootply.com/94452" rel="nofollow">suggested by skelly</a> but when I implement it shows only a single image on the carousel and when I click on the prev/next control then only one more image is showing besides the earlier one. I need Four images to be shown all the times. if 1 image from left is goes out then at the same time 1 more image should be inserted from the right. I added the "jquery/1.11.1/jquery.min.js" and "bootstrap-3.2.0-dist/bootstrap.js" additionally but it didn't work.</p>
  
  <p>my implemented code is as:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="./bootstrap-3.2.0-dist/js/bootstrap.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $('#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));
  }
  });
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  .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;}
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&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;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any suggestion would be highly appreciated. </p>