在它的幻灯片结尾处停止Twitter Bootstrap Carousel

Question

Bootstrap旋转木马是一个奇怪的野兽.我已经尝试调整$ next以防止无限循环,但最终要么打破它,要么阻止幻灯片在到达结尾时向后移动.

我希望旋转木马只在列表中滑动而不是无限循环.

任何帮助,将不胜感激.

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

更新:这与"自动播放"无关我特别指的是手动按下左右按钮.

Answer 1

对于轮播不能无限循环(使用Bootstrap 3.0.0),并在最后一张幻灯片停止,除非点击"下一个"箭头,以下是最好的方法:

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

设置wrap选项以false告知轮播停止自动循环滑动.我希望这能正确回答你的问题.

Answer 2

您可以在页面中添加一些代码,以便在slid事件发生后隐藏相应的轮播控件:

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

});

此示例假定在Twitter Bootstrap示例轮播上使用了标记.

打开页面时,请务必隐藏左边的一个.

Answer 3

data-wrap="false"在Div中添加属性