title: Responsive twitter bootstrap carousel with multiple elements
body: <p>I have a twitter bootstrap carousel with 3 items on a row. The example is <a href="http://jsfiddle.net/paulalexandru/at606jpe/" rel="nofollow">here</a>. How I can make it responsive? I want to display one single element for the mobile devices.</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide"&gt;  
      &lt;div class="carousel-inner"&gt;
          &lt;div class="item active"&gt;
              &lt;div class="col-xs-4"&gt;
                  &lt;a href="#"&gt;&lt;img src="http://placehold.it/500/bbbbbb/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-4"&gt;
                    &lt;a href="#"&gt;&lt;img src="http://placehold.it/500/CCCCCC&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-4"&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-4"&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-4"&gt;
                  &lt;a href="#"&gt;&lt;img src="http://placehold.it/500/fcfcfc/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-4"&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&gt;
  
      &lt;!-- Controls --&gt;
      &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
          &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And</p>
  
  <pre><code>.carousel-inner .active.left  { left: -33%;             }
  .carousel-inner .active.right { left: 33%;              }
  .carousel-inner .next         { left: 33%               }
  .carousel-inner .prev         { left: -33%              }
  .carousel-control.left        { background-image: none; }
  .carousel-control.right       { background-image: none; }
  .carousel-inner .item         { background: white;      }
  </code></pre>
  
  <p>And</p>
  
  <pre><code>$('#myCarousel').carousel({
      interval: 10000
  })
  
  $('.carousel .item').each(function(){
      var next = $(this).next();
      if (!next.length) {
          next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
  
      if (next.next().length&gt;0) {
          next.next().children(':first-child').clone().appendTo($(this));
      }
      else {
          $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
      }
  });
  </code></pre>