CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3carousel
anyavacy
anyavacy

Reputation: 1697

How can I disable a button at the last slide of a carousel?

I am using bootstrap carousel and I want to stop the carousel from sliding when it reaches the last slide ( stop at the last slide), and then disable the "next" button

Upvotes: 4

Views: 21834

Answers (6)

Kiran Mali
Kiran Mali

Reputation: 657

Try Slick slider https://kenwheeler.github.io/slick/. It has almost every feature. Including button disable and customization.

In button disable case, you need to infinite: false option of slick slider

Upvotes: 0

Devil Bro
Devil Bro

Reputation: 989

You can disable navigation arrow instead of hide by adding style through script.

$('.carousel').carousel({
  }).on('slid.bs.carousel', function () {
      currentSlide = $('.active');
    if(currentSlide.is( ':first-child' )) {
        $('.carousel-control-prev').css('pointer-events', 'none');
       return;
    } else {
        $('.carousel-control-prev').css('pointer-events', 'auto');    
    }
    if (currentSlide.is( ':last-child' )) {
        $('.carousel-control-next').css('pointer-events', 'none');
       return;
    } else {
        $('.carousel-control-next').css('pointer-events', 'auto');  
    }
  });

Demo

Upvotes: 0

Felix
Felix

Reputation: 139

jme11's code is not working for 2 slides, if you switch forth and back both buttons disappear. here is a changed version:

$('.carousel').carousel({
      wrap: false
    }).on('slid.bs.carousel', function () {
        curSlide = $('.active');
      if (curSlide.is(':first-child')) {
    $('.left').hide();
    $('.right').show();
  } else if (curSlide.is(':last-child')) {
    $('.right').hide();
    $('.left').show();
  } else {
    $('.left').show();
    $('.right').show();
  }
});

Upvotes: 0

Rajko Marković
Rajko Marković

Reputation: 25

I've combined both Naliza's and jme11's code, just to add the part where the first (left) control gets removed as soon as your page loads. In my case I've used it for a modal.

$('.carousel-sync').carousel('cycle');
$('.carousel-sync').on('click', '.carousel-control[data-slide]', function (ev) {
    ev.preventDefault();
    $('.carousel-sync').carousel($(this).data('slide'));
});
$('.carousel').carousel({wrap: false}).on('slid.bs.carousel', function () {
    var $this = $(this);
    $this.children('.carousel-control').show();

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

DEMO

Upvotes: 0

jme11
jme11

Reputation: 17374

To disable the carousel from "wrapping" there's an option. You can either set data-wrap="false" on the carousel or just put it in the options when you initialize the carousel.

To handle the disabling of the next/previous buttons, I think the answer from Naliza works fine, but it's an awful lot of code. Here's a shorter version that handles setting the wrap property to false as well:

jQuery to initialize carousel and show/hide previous/next arrows:

$('.carousel').carousel({
  wrap: false
}).on('slid.bs.carousel', function () {
    curSlide = $('.active');
  if(curSlide.is( ':first-child' )) {
     $('.left').hide();
     return;
  } else {
     $('.left').show();   
  }
  if (curSlide.is( ':last-child' )) {
     $('.right').hide();
     return;
  } else {
     $('.right').show();      
  }
});

Since the event handler only runs after the carousel slides, you want to set the .left to display: none in your css so when the carousel is displayed when the page is loaded the left arrow is hidden. Then as soon as the carousel slides for the first time, the code above will display the left arrow.

CSS:

.left {
  display: none;
}

I won't include the HTML as this is designed to work with boilerplate Bootstrap carousel markup.

DEMO

Upvotes: 9

Naliza
Naliza

Reputation: 110

Take a look at this -> http://www.bootply.com/0i7STdt3Ex

You just need to check if the item in carousel is last when it's sliding

Upvotes: 5

Related Questions