How to stop infinite loop in Carousel?

Question

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 data-wrap="false" but it won't work. Please help me.Trying to achieve product slider present on this site

JQuery

$('#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<2;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
    }
});

HTML

    <div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="000" data-pause="hover" data-wrap="false">
            <div class="carousel-inner">
                <div class="item active ">
                    <div class="col-xs-3"><a href="mobile/samsung/samsung.html"><img src="images/s8.png" class="img-responsive thumb"></a>

                        <h3>
                            Smartphones
                        </h3> 
                    </div>
                </div>

                <div class="item">
                    <div class="col-xs-3"><a href="mobile/nokia/nokia.html"><img src="images/n9.jpg" class="img-responsive thumb"></a>
                        <h3>
                            Feature Phones
                        </h3>
                    </div>
                </div>

                <div class="item">
                    <div class="col-xs-3"><a href="mobile/nokia/nokia.html"><img src="images/n9.jpg" class="img-responsive thumb"></a>
                        <h3>
                            Screen Protectors
                        </h3>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>    
        </div>   
    </div>  

Answer 1

Try it

 $(document).ready(function() {
    $('#myCarousel').carousel({
    interval: 1000,
      wrap: false
    })

    $('#myCarousel').on('slid.bs.carousel', function() {
        //alert("slid");
    });


  $('#myCarousel').on('slid.bs.carousel', '', function() {
      var $this = $(this);

      $this.children('.carousel-control').show();

      if($('.carousel-inner .item:first').hasClass('active')) {
        $this.children('.left.carousel-control').hide();
      } else if($('.carousel-inner .item:last').hasClass('active')) {
        $this.children('.right.carousel-control').hide();
      }

    }); 

});