title: How to advance 3 images at one time in Bootstrap Carousel?
body: <p>I have made a carousel which contain three images as a group. </p>
  
  <p>For example:
  &lt;[1][2][3]></p>
  
  <p>Currently when you hit right arrow, it only goes one image at a time.
  &lt;[2][3][4]></p>
  
  <p>I would like to know when clicking on the arrow, how to show/advance to the next three images. </p>
  
  <p>Like this:
  &lt;[4][5][6]></p>
  
  <p>Here's some code:</p>
  
  <pre><code>&lt;div class="carousel slide" id="myCarousel" data-interval="false"&gt;
      &lt;div class="carousel-inner"&gt;
       &lt;div class="item active"&gt;
         &lt;div class="col-md-4"&gt;image1&lt;/div&gt;
       &lt;/div&gt;
  
       &lt;div class="item"&gt;
         &lt;div class="col-md-4"&gt;image2&lt;/div&gt;
       &lt;/div&gt;
  
        &lt;div class="item"&gt;
         &lt;div class="col-md-4"&gt;image3&lt;/div&gt;
       &lt;/div&gt;
  
        &lt;div class="item"&gt;
         &lt;div class="col-md-4"&gt;image4&lt;/div&gt;
       &lt;/div&gt;
  
        &lt;div class="item"&gt;
         &lt;div class="col-md-4"&gt;image5&lt;/div&gt;
       &lt;/div&gt;
  
        &lt;div class="item"&gt;
         &lt;div class="col-md-4"&gt;image6&lt;/div&gt;
       &lt;/div&gt;
  
      &lt;/div&gt;&lt;/div&gt;
  
       &lt;script&gt;
  
      $('.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>