title: Bootstrap Infinite carousel (loop) multi-Item
body: <p>i am creating Testimonial For my project, I want to show only  3 Face indicators and remaining hide on click Left and right Control it should appear by replacing 3rd Face indicator and same goes for auto play,</p>
  
  <p>Any Suggestions for newbie it would be useful</p>
  
  <p>Thanks</p>
  
  <p><a href="https://jsfiddle.net/n4v63g3L/1/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="carousel slide" data-ride="carousel" id="quote-carousel"&gt;
                  &lt;!-- Carousel Slides / Quotes --&gt;
                  &lt;div class="carousel-inner text-center"&gt;
                      &lt;!-- Quote 1 --&gt;
                      &lt;div class="item active"&gt;
                          &lt;blockquote&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-sm-8 col-sm-offset-2"&gt;
                                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/blockquote&gt;
                      &lt;/div&gt;
                      &lt;!-- Quote 2 --&gt;
                      &lt;div class="item"&gt;
                          &lt;blockquote&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-sm-8 col-sm-offset-2"&gt;
                                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/blockquote&gt;
                      &lt;/div&gt;
                      &lt;!-- Quote 3 --&gt;
                      &lt;div class="item"&gt;
                          &lt;blockquote&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-sm-8 col-sm-offset-2"&gt;
                                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/blockquote&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Bottom Carousel Indicators --&gt;
                  &lt;ol class="carousel-indicators"&gt;
                      &lt;li data-target="#quote-carousel" data-slide-to="0" class="active"&gt;&lt;img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg" alt=""&gt;
                      &lt;/li&gt;
                      &lt;li data-target="#quote-carousel" data-slide-to="1"&gt;&lt;img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" alt=""&gt;
                      &lt;/li&gt;
                      &lt;li data-target="#quote-carousel" data-slide-to="2"&gt;&lt;img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt=""&gt;
                      &lt;/li&gt;
                  &lt;/ol&gt;
                  &lt;!-- Carousel Buttons Next/Prev --&gt;
                 &lt;a data-slide="prev" href="#quote-carousel" class="left carousel-control"&gt;&lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a data-slide="next" href="#quote-carousel" class="right carousel-control"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function() {
      //carousel options
      $('#quote-carousel').carousel({
          pause: true,
          interval: 20000,
      });
  });
  &lt;/script&gt;
  </code></pre>