Stop Twitter Bootstrap Carousel at the end of it's slides

Question

The Bootstrap carousel is a strange beast. I've tried tweaking $next to prevent infinite looping but end up either breaking it or preventing the slides from going backwards when reaching the end.

I would like the carousel to only slide within the list and not infinitely loop.

Any help would be appreciated.

$next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if ($.support.transition && this.$element.hasClass('slide')) {
    this.$element.trigger(e)
    if (e.isDefaultPrevented()) return
    $next.addClass(type)
    $next[0].offsetWidth // force reflow
    $active.addClass(direction)
    $next.addClass(direction)
    this.$element.one($.support.transition.end, function() {
        $next.removeClass([type, direction].join(' ')).addClass('active')
        $active.removeClass(['active', direction].join(' '))
        that.sliding = false
        setTimeout(function() {
            that.$element.trigger('slid')
        }, 0)
    })
} else {
    this.$element.trigger(e)
    if (e.isDefaultPrevented()) return
    $active.removeClass('active')
    $next.addClass('active')
    this.sliding = false
    this.$element.trigger('slid')
}

Update: This is unrelated to "autoplay" I'm specifically referring to manually pressing the left and right buttons.

Answer 1

For the carousel to not infinitely loop (using Bootstrap 3.0.0), and stop at the last slide unless the "next" arrow is clicked, the following is the best way to do it:

$('.carousel').carousel({
  interval: 5000,
  wrap: false
});

Setting the wrap option to false tells the carousel to stop cycling through the slides automatically. I hope this answers your question correctly.