title: bootstrap 3 multi column responsive carousel
body: <p>I've been playing with the bootstrap carousel, trying to make it display 4 columns per slide, responsively.  The responsive side of things is perfect, however when the last slide slides the carousel isn't wrapping back to the first slide.  It just disappears.  Can anyone identify the problem?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="carousel-example-generic" class="carousel slide"&gt;
  &lt;!-- Indicators --&gt;
  &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
  &lt;/ol&gt;
  
  &lt;!-- Wrapper for slides --&gt;
  &lt;div class="carousel-inner"&gt; 
      &lt;!-- Slide --&gt;
      &lt;div class="item active"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-3 col-xs-6"&gt; &lt;img src="http://placehold.it/260x180" alt=""/&gt;
                  &lt;div class="carousel-caption"&gt;This is a caption&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-3 col-xs-6"&gt; &lt;img src="http://placehold.it/260x180" alt=""/&gt;
                  &lt;div class="carousel-caption"&gt;This is a caption&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-3 col-xs-6"&gt; &lt;img src="http://placehold.it/260x180" alt=""/&gt;
                  &lt;div class="carousel-caption"&gt;This is a caption&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-3 col-xs-6"&gt; &lt;img src="http://placehold.it/260x180" alt=""/&gt;
                  &lt;div class="carousel-caption"&gt;This is a caption&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Slide --&gt;
      &lt;div class="item"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-3 col-xs-6"&gt; &lt;img src="http://placehold.it/260x180" alt=""/&gt;
                  &lt;div class="carousel-caption"&gt;This is a caption&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-3 col-xs-6"&gt; &lt;img src="http://placehold.it/260x180" alt=""/&gt;
                  &lt;div class="carousel-caption"&gt;This is a caption&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-3 col-xs-6"&gt; &lt;img src="http://placehold.it/260x180" alt=""/&gt;
                  &lt;div class="carousel-caption"&gt;This is a caption&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-3 col-xs-6"&gt; &lt;img src="http://placehold.it/260x180" alt=""/&gt;
                  &lt;div class="carousel-caption"&gt;This is a caption&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Slide --&gt;
      &lt;div class="item"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-3 col-xs-6"&gt; &lt;img src="http://placehold.it/260x180" alt=""/&gt;
                  &lt;div class="carousel-caption"&gt;This is a caption&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-3 col-xs-6"&gt; &lt;img src="http://placehold.it/260x180" alt=""/&gt;
                  &lt;div class="carousel-caption"&gt;This is a caption&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-3 col-xs-6"&gt; &lt;img src="http://placehold.it/260x180" alt=""/&gt;
                  &lt;div class="carousel-caption"&gt;This is a caption&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-3 col-xs-6"&gt; &lt;img src="http://placehold.it/260x180" alt=""/&gt;
                  &lt;div class="carousel-caption"&gt;This is a caption&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Controls --&gt; 
      &lt;a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"&gt; &lt;span class="icon-prev"&gt;&lt;/span&gt; &lt;/a&gt; &lt;a class="right carousel-control" href="#carousel-example-generic" data-slide="next"&gt; &lt;span class="icon-next"&gt;&lt;/span&gt; &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('#carousel-example-generic').carousel();
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.carousel.slide img {
      width:100%;
      height:auto;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/S2rnm/786/" rel="noreferrer">jsFiddle</a></p>
  
  <p>[update] Here's an updated <a href="http://jsfiddle.net/S2rnm/791/" rel="noreferrer">jsFiddle</a> that works - thanks to Adrift!</p>
  
  <p>[update2] <a href="http://jsfiddle.net/S2rnm/795/" rel="noreferrer">http://jsfiddle.net/S2rnm/795/</a> this version responsively shows a different carousel containing 4, 2 or 1 column depending on device size.  It requires 3 carousel's each with different visible-x class.</p>