title: How to select next 5 items using jQuery
body: <p>I'm using Bootstrap 3's carousel to implement a thumbnail scroller for results in my page.</p>
  
  <p>I have the following code:</p>
  
  <pre><code>&lt;script&gt;
  $('#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));
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="col-md-7"&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-md-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-md-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-md-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-md-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-md-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-md-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;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>The CSS:</p>
  
  <pre><code>.carousel-inner .active.left { left: -33%; }
  .carousel-inner .next        { left:  33%; }
  .carousel-inner .prev        { left: -33%; }
  .carousel-control.left,.carousel-control.right {background-image:none;}
  </code></pre>
  
  <p>The code, which can be seen running <a href="http://www.bootply.com/104336" rel="nofollow">here</a> </p>
  
  <p>I would like to be able to have 6 thumbnails displayed at any one time. Can anyone please help?</p>