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

更新：这与＆＃34; autoplay＆＃34;无关。我特别指的是手动按下左右按钮。

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 example carousel.

上使用了标记

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

Answer 3

最简单的方法如下：

//intro slider
$('#carousel_fade_intro').carousel({
    interval: 2500,
    pause: "false"
})

//Stop intro slider on last item
var cnt = $('#carousel_fade_intro .item').length;
$('#carousel_fade_intro').on('slid', '', function() {
    cnt--;
    if (cnt == 1) {
        $('#carousel_fade_intro').carousel('pause');
    }
});

Answer 4

在Div

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

Answer 5

如果您使用的是bootstrap 3，请使用此

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

Answer 6

不确定这是否仅与最新版本的Bootstrap相关，但设置data-wrap =＆＃34; false＆＃34;在最外面的转盘容器上将阻止它经过最后的滑动。

来源：http://getbootstrap.com/javascript/#carousel-options

Answer 7

对于在同一页面上为多个轮播工作的 Bootstrap 3 寻找解决方案的人，请尝试以下操作：

$(function() {
    // init carousel
    $('.carousel').carousel({
        pause: true,        // init without autoplay (optional)
        interval: false,    // do not autoplay after sliding (optional)
        wrap:false          // do not loop
    });
    // init carousels with hidden left control:
    $('.carousel').children('.left.carousel-control').hide();
});

// execute function after sliding:
$('.carousel').on('slid.bs.carousel', function () {
    // This variable contains all kinds of data and methods related to the carousel
    var carouselData = $(this).data('bs.carousel');
    // get current index of active element
    var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));

    // hide carousel controls at begin and end of slides
    $(this).children('.carousel-control').show();
    if(currentIndex == 0){
        $(this).children('.left.carousel-control').fadeOut();
    }else if(currentIndex+1 == carouselData.$items.length){
        $(this).children('.right.carousel-control').fadeOut();
    }
});

如果你的情况不适合，请现在就告诉我。

Answer 8

此处发布的代码有两个问题：如果您在同一页面上有多个轮播，则不起作用，如果您点击指示点，则无法正常工作。此外，在 Bootstrap 3 中，事件已更改名称。

以下代码是this code的更新版本。在这里，您可以找到更多detailed explanation

checkitem = function() {
  var $this;
  $this = $("#slideshow");
  if ($("#slideshow .carousel-inner .item:first").hasClass("active")) {
    $this.children(".left").hide();
    $this.children(".right").show();
  } else if ($("#slideshow .carousel-inner .item:last").hasClass("active")) {
    $this.children(".right").hide();
    $this.children(".left").show();
  } else {
    $this.children(".carousel-control").show();
  }
};

checkitem();

$("#slideshow").on("slid.bs.carousel", "", checkitem);

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

8 个答案: