在它的幻灯片结尾处停止Twitter Bootstrap Carousel [英] Stop Twitter Bootstrap Carousel at the end of it's slides

问题描述

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

The Bootstrap carousel is a strange beast. I've tried tweaking $next to prevent infinite looping but end up either breaking it or preventing the slides from going backwards when reaching the end.

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

I would like the carousel to only slide within the list and not infinitely loop.

任何帮助都将不胜感激。

Any help would be appreciated.

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

更新：这与autoplay我特别指的是手动按下左右按钮。

Update: This is unrelated to "autoplay" I'm specifically referring to manually pressing the left and right buttons.

推荐答案

你可以添加一些代码到在滑动事件后隐藏相应轮播控件的页面：

You could just add some code to the page to hide the appropriate carousel controls after a slid event:

$('#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示例轮播。

确保在打开页面时隐藏左边的一个。

Make sure to hide the left one when you open the page.

这篇关于在它的幻灯片结尾处停止Twitter Bootstrap Carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！