CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcarousel
Zach Shallbetter
Zach Shallbetter

Reputation: 1911

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

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.

Upvotes: 16

Views: 37443

Answers (8)

Fred K
Fred K

Reputation: 13910

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);

Upvotes: 0

royalyadnesh
royalyadnesh

Reputation: 97

Add attribute data-wrap="false" in Div

Upvotes: 5

Karl Adler
Karl Adler

Reputation: 16786

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.

Upvotes: 2

DataCat Robin
DataCat Robin

Reputation: 654

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

Upvotes: 2

Shuhad zaman
Shuhad zaman

Reputation: 3390

if you are using bootstrap 3 use this

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

Upvotes: 1

Daniely
Daniely

Reputation: 251

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.

Upvotes: 25

ryanka
ryanka

Reputation: 303

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');
    }
});

Upvotes: 3

merv
merv

Reputation: 76700

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.

Upvotes: 14

Related Questions