title: How to stop infinite loop in Carousel?
body: <p>I have created a carousel for the product sliding for sample e-commerce site, it works fine but it runs in the infinite loop, but I want to stop that slider when last product will come. I have tried <code>data-wrap="false"</code> but it won't work. Please help me.<a href="https://www.flipkart.com/" rel="nofollow noreferrer">Trying to achieve product slider present on this site</a></p>
  
  <p>JQuery</p>
  
  <pre><code>$('#myCarousel').carousel({
      interval: 000
  })
  
  $('#myCarousel1').carousel({
      interval: 000
  })
  
  $('#myCarousel2').carousel({
      interval: 000
  })
  
  $('#myCarousel3').carousel({
      interval: 000
  })
  
  $('#myCarousel4').carousel({
      interval: 000
  })
  
  $('#myCarousel5').carousel({
      interval: 000
  })
  $('#myCarousel6').carousel({
      interval: 000
  })
  $('.carousel .item').each(function(){
      var next = $(this).next();
      if (!next.length) {
          next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
  
      for (var i=0;i&lt;2;i++) {
          next=next.next();
          if (!next.length) {
              next = $(this).siblings(':first');
          }
  
          next.children(':first-child').clone().appendTo($(this));
      }
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="000" data-pause="hover" data-wrap="false"&gt;
              &lt;div class="carousel-inner"&gt;
                  &lt;div class="item active "&gt;
                      &lt;div class="col-xs-3"&gt;&lt;a href="mobile/samsung/samsung.html"&gt;&lt;img src="images/s8.png" class="img-responsive thumb"&gt;&lt;/a&gt;
  
                          &lt;h3&gt;
                              Smartphones
                          &lt;/h3&gt; 
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="item"&gt;
                      &lt;div class="col-xs-3"&gt;&lt;a href="mobile/nokia/nokia.html"&gt;&lt;img src="images/n9.jpg" class="img-responsive thumb"&gt;&lt;/a&gt;
                          &lt;h3&gt;
                              Feature Phones
                          &lt;/h3&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="item"&gt;
                      &lt;div class="col-xs-3"&gt;&lt;a href="mobile/nokia/nokia.html"&gt;&lt;img src="images/n9.jpg" class="img-responsive thumb"&gt;&lt;/a&gt;
                          &lt;h3&gt;
                              Screen Protectors
                          &lt;/h3&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>