title: Bootstrap Carousel multi columns slide 1 at a time
body: <p>The goal: To have multiple <code>columns (6)</code> in a <code>bootstrap carousel</code> that slides one column at a time, and goes round in a <code>circle</code>.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&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-2"&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-2"&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-2"&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-2"&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-2"&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-2"&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-2"&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-2"&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>
  
  <p><strong>JS:</strong></p>
  
  <pre><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; 4; i++) {
          next = next.next();
          if (!next.length) {
              next = $(this).siblings(':first');
          }
  
          next.children(':first-child').clone().appendTo($(this));
      }
  });
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>.carousel-inner .active.left {
      left: -16.6%;
  }
  
  .carousel-inner .next {
      left: 16.6%;
  }
  
  .carousel-control.left, .carousel-control.right {
      background-image: none;
  }
  </code></pre>
  
  <p>I have it set up on this <a href="https://jsfiddle.net/JohnHalsey/abmtmjyz/" rel="nofollow"><strong>JSFIDDLE</strong></a> ( blatant copy from this <a href="http://www.bootply.com/123662#" rel="nofollow"><strong>bootply</strong></a> -  which does work!)</p>
  
  <p>The problem with mine is that it scrolls all 6 columns at once, however on the next loop, it is the correct slide at the start.</p>
  
  <p>I can't see what I'm doing differently, and been staring at it for ages.</p>
  
  <p>Any advice welcome..... PLEASE!!</p>