Question

我正在使用自举旋转木马，我想阻止旋转木马在到达最后一张幻灯片时滑动（在最后一张幻灯片处停止），然后禁用“下一步”按钮

Answer 1

禁用旋转木马＆＃34;包装＆＃34;有一个选择。您可以设置data-wrap =＆＃34; false＆＃34;在旋转木马上或者在初始化旋转木马时将其放入选项中。

为了处理下一个/上一个按钮的禁用，我认为Naliza的答案运行良好，但它的代码非常多。这是一个较短的版本，用于处理将wrap属性设置为false：

jQuery 初始化轮播并显示/隐藏上一个/下一个箭头：

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

由于事件处理程序仅在轮播幻灯片后运行，因此您希望将.left设置为在css中显示：none，因此当加载页面时显示轮播时，左箭头将被隐藏。然后，当旋转木马第一次滑动时，上面的代码将显示左箭头。

<强> CSS：

.left {
  display: none;
}

我不会包含HTML，因为它旨在使用样板文件Bootstrap轮播标记。

DEMO

Answer 2

看看这个 - ＆gt; http://www.bootply.com/0i7STdt3Ex

您只需要检查旋转木马中的项目是否在滑动时是最后一个

Answer 3

我结合了Naliza和jme11的代码，只是为了添加第一个（左）控件在页面加载后被删除的部分。在我的情况下，我已经将它用于模态。

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

Answer 4

jme11的代码不适用于2张幻灯片，如果你切换前后两个按钮都消失了。这是一个更改版本：

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

Answer 5

您可以通过添加脚本样式来禁用导航箭头，而不是隐藏。

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

Answer 6

尝试滑动滑块https://kenwheeler.github.io/slick/。它几乎具有所有功能。包括按钮禁用和自定义。

在禁用按钮的情况下，您需要infinite: false光滑滑条的选项

如何在旋转木马的最后一张幻灯片上禁用按钮？

6 个答案:

DEMO