title: Horizontal Multiple item slider with 1 item scroll in HTML/CSS (No Plugin) with Bootstrap 3.3.+
body: <p>Check this example <a href="http://www.bootply.com/94452" rel="nofollow noreferrer">http://www.bootply.com/94452</a></p>
  
  <p>I need to make similarly horizontal multi item slider without using plugin. i want to make it in html css and js/jquery.</p>
  
  <p>Above slider does not work well when copied it and tried, it slides all item on screen then at the end scrolled only once.</p>
  
  <p>I want to slide item 1 by 1.</p>
  
  <p>After the last item there should be the first in other words slides should be circularly.</p>
  
  <p>Items containing images and other contents.
  Here is code i tried.</p>
  
  <pre><code>&lt;style&gt;
      @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.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;}
  &lt;/style&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&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;
  
  &lt;script&gt;
      $(document).ready(function () {
          $('#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;
  </code></pre>
  
  <p>Any one could fix this or any better code.
  Thanks in advance</p>