Bootstrap carousel: prevent next/prev or indicator buttons while animating

Question

I am trying to make a small function to stop the next/prev buttons and indicators from sliding around while the carousel is animating.

JSFiddle Example

I've tried:

$('.carousel').on('slid',function() {
   var carousel = $(this);
   function preventClick() {
       carousel.on('click','.carousel-indicators li, .carousel-control', function() {
            return false;
       });    
   }


   function releaseClick() {
       setTimeout(function() {
           carousel.on('click','.carousel-indicators li, .carousel-control', function() {
               return true;
           });
       }, 2000);    
   }
   preventClick(); releaseClick();
});

Any idea why this doesn't work? Or perhaps you have a better idea?

Answer 1

If I understand what you want correctly, you can achieve this with the use of the disabled attribute.

JSFiddle Demo

Take a look at the following code:

var myCarousel = $("#myCarousel");

//bind forcePause() to the slide event for our carousel
myCarousel.on('slide',{ pauseAmount: 5000}, forcePause);

/**  setTimeout and disable all carousel navigation   *
*    properties for the duration of the pause         */
function forcePause(event){
    //extract pauseAmount from our bound data
    var pauseAmount = event.data.pauseAmount

    //get all the navigation properties of myCarousel
    var carouselNavElements = myCarousel.find(
        "a[href=#myCarousel], li[data-target=#myCarousel]"
    );

    //set the disabled attribute to true for the carousel's nav elements
    carouselNavElements.prop('disabled', true);
    console.log('pause started');

    //set the timer with the pauseAmount
    setTimeout(function(){
        console.log('pause finished');

        //"reenable" the nav elements
        carouselNavElements.prop('disabled', false);
    }, pauseAmount);
}

//this is already built-in functionality for anchors in bootstrap, just add support for li
$('body').on('click', 'li.disabled', function(event) {
    event.preventDefault();
});

Keep in mind that we bound it to the slide event so this will force a pause of the automatic event triggering of the carousel as well ie:

myCarousel.carousel({
  interval: 2000 
});

If that's unwanted, you can change the event to click and bind it to the nav elements but you'll have to manually manage the event.

Answer 2

You can get a promise by using .promise() and then add a .done() handler.

Better for BS slider would be "slid". Slid is fired when the event is done. Does the same thing what you want I think.

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

edit 3: Working example here: http://www.bootply.com/118355

Answer 3

What version of bootstrap are you using? As I assume you are talking about twitter bootstrap.

Can you make sure you upgrade to the latest version (2.3.s if you are using bootstrap 2 and 3.1.1 if you are using bootstrap 3 because neither
http://getbootstrap.com/2.3.2/javascript.html#carousel
nor
http://getbootstrap.com/javascript/#carousel
have a problem like you described.