Question

我正在尝试制作一个小功能，以便在旋转木马动画时停止下一个/上一个按钮和指示器滑动。

我试过了：

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

知道为什么这不起作用？或许你有更好的主意？

Answer 1

如果我理解你想要什么，你可以使用disabled属性来实现这一点。

JSFiddle Demo

看看以下代码：

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

请记住，我们将它绑定到slide事件，因此这将强制暂停旋转木马的自动事件触发，即：

myCarousel.carousel({
  interval: 2000 
});

如果这是不受欢迎的，您可以将事件更改为click并将其绑定到nav元素，但您必须手动管理该事件。

Answer 2

您可以使用.promise()获取承诺，然后添加.done()处理程序。

更好的BS滑块将“滑动”。事件完成后会触发Slid。我想你想做同样的事情。

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

编辑3：这里的工作示例： http://www.bootply.com/118355

Answer 3

您使用的是什么版本的bootstrap？我假设你在谈论twitter bootstrap。

您能否确保升级到最新版本（2.3.s如果您使用bootstrap 2和3.1.1，如果您使用的是bootstrap 3，因为它们都没有 http://getbootstrap.com/2.3.2/javascript.html#carousel
也不
http://getbootstrap.com/javascript/#carousel
有你所描述的问题。

Bootstrap轮播：在动画时阻止next / prev或指示按钮

3 个答案: