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.

score 25 · Answer 1 · answered Oct 03 '13 at 11:13

25

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.

answered Oct 03 '13 at 11:13

Daniely

251
3
2

1

Thanks its help me this thing today on my one of the website project. – Bhavin Thummar Jul 14 '17 at 05:22

merv · Accepted Answer · 2012-10-25T15:11:21.410

14

You could just add some code to the page to hide the appropriate carousel controls after a slid event:

$('#myCarousel').on('slid', '', 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();
  }

});

This example assumes the markup used on the Twitter Bootstrap example carousel.

Make sure to hide the left one when you open the page.

edited Oct 25 '12 at 15:11

answered Jul 11 '12 at 21:56

merv

67,214
13
180
245

1

It doesn't seem to have any effect on the carousel at all. http://pastebin.com/88dSYwcD Wish I had more information, but I'm kind of at a loss. – Zach Shallbetter Jul 11 '12 at 22:44
@ZachShallbetter Unlike the Bootstrap example, your control elements are nested a little farther down. Changing my code from `$this.children(...)` to `$this.find(...)` should get it working for you. `children` only returns first level down descendants, whereas `find` will return all descendants. In the end, I would recommend using narrower selectors than the example code I give in my answer. – merv Jul 11 '12 at 23:08
Excellent, that worked well. I assume I'll also need to hide the first left arrow initially as well. – Zach Shallbetter Jul 12 '12 at 15:49
@ZachShallbetter, yeah that's what I meant by that last line in my answer. Glad it helped. Don't forget to accept the answer if this got it working for you. – merv Jul 12 '12 at 19:51
Thanks to @user1311103 (https://github.com/jann) for pointing out a fix in the logic to cover the two slide case. – merv Oct 25 '12 at 15:17
1

Here is an updated version of this code for Bootstrap 3 that works also for indicator actions and for multiple carousel in the same page: https://coderpills.wordpress.com/2014/06/05/how-to-hide-carousel-controls-on-first-and-last-items-in-bootstrap-3/ – Fred K Jun 05 '14 at 08:58

score 5 · Answer 3 · answered Mar 14 '15 at 19:26

5

Add attribute data-wrap="false" in Div

answered Mar 14 '15 at 19:26

royalyadnesh

97
1
7

score 3 · Answer 4 · answered May 08 '13 at 23:52

The easiest way to do this is as follows:

//intro slider
$('#carousel_fade_intro').carousel({
    interval: 2500,
    pause: "false"
})

//Stop intro slider on last item
var cnt = $('#carousel_fade_intro .item').length;
$('#carousel_fade_intro').on('slid', '', function() {
    cnt--;
    if (cnt == 1) {
        $('#carousel_fade_intro').carousel('pause');
    }
});

score 2 · Answer 5 · answered Jan 30 '15 at 14:25

2

Not sure if this is only relevent to the newest version of Bootstrap but setting data-wrap="false" on the outermost carousel container will prevent it from proceeding past the final slide.

source: http://getbootstrap.com/javascript/#carousel-options

answered Jan 30 '15 at 14:25

DataCat Robin

624
1
6
12

Karl Adler · Answer 6 · 2015-03-13T10:47:15.310

For people looking for a solution for Bootstrap 3 working for multiple carousels on same page try this:

$(function() {
    // init carousel
    $('.carousel').carousel({
        pause: true,        // init without autoplay (optional)
        interval: false,    // do not autoplay after sliding (optional)
        wrap:false          // do not loop
    });
    // init carousels with hidden left control:
    $('.carousel').children('.left.carousel-control').hide();
});

// execute function after sliding:
$('.carousel').on('slid.bs.carousel', function () {
    // This variable contains all kinds of data and methods related to the carousel
    var carouselData = $(this).data('bs.carousel');
    // get current index of active element
    var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));

    // hide carousel controls at begin and end of slides
    $(this).children('.carousel-control').show();
    if(currentIndex == 0){
        $(this).children('.left.carousel-control').fadeOut();
    }else if(currentIndex+1 == carouselData.$items.length){
        $(this).children('.right.carousel-control').fadeOut();
    }
});

Please let me now if this is not working in your case.

score 1 · Answer 7 · edited Oct 26 '14 at 11:13

1

if you are using bootstrap 3 use this

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

edited Oct 26 '14 at 11:13

Luke

11,426
43
60
69

answered Oct 26 '14 at 10:51

Shuhad zaman

3,156
32
32

score 0 · Answer 8 · edited May 23 '17 at 12:10

The codes posted here have two problems: doesn't work if you have more than one carousel on the same page and doesn't work if you click on the indicator dots. Also, in Bootstrap 3 the event has changed name.

The below code is an updated version of this code. And here you can find a more detailed explanation

checkitem = function() {
  var $this;
  $this = $("#slideshow");
  if ($("#slideshow .carousel-inner .item:first").hasClass("active")) {
    $this.children(".left").hide();
    $this.children(".right").show();
  } else if ($("#slideshow .carousel-inner .item:last").hasClass("active")) {
    $this.children(".right").hide();
    $this.children(".left").show();
  } else {
    $this.children(".carousel-control").show();
  }
};

checkitem();

$("#slideshow").on("slid.bs.carousel", "", checkitem);

since you are using an ID in the code it will also not work for more than one carousel on same page. — Karl Adler, Mar 12 '15 at 23:47

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

8 Answers8

Linked