logo标签列表

停止 Twitter Bootstrap 走马灯在其幻灯片结束时。

javascriptjquerytwitter-bootstrapcarousel
16

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

更新：这与“自动播放”无关，我特别指的是手动按左右按钮。

8个回答
25

如果想要防止轮播图（使用Bootstrap 3.0.0）无限循环，并且在最后一张幻灯片时停止，除非单击“下一个”箭头，则采用以下方法是最佳方式：

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

如果将wrap选项设置为false，轮播图将停止自动循环幻灯片。我希望这个回答正确地解答了你的问题。

1
谢谢，这个东西今天帮了我在我的一个网站项目上。 - Bhavin Thummar
14

在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 走马灯的标记。

确保在打开页面时隐藏左侧。

1
它似乎对走马灯没有任何影响。http://pastebin.com/88dSYwcD但愿我有更多的信息，但我有点茫然。 - Zach Shallbetter
@ZachShallbetter 与 Bootstrap 示例不同，您的控件元素嵌套得更深。将我的代码从 $this.children(...) 更改为 $this.find(...) 应该可以让它为您工作。children 只返回第一级后代，而 find 将返回所有后代。最终，我建议使用比我在答案中给出的示例代码更窄的选择器。 - merv
很好，这个效果不错。我想最开始也需要隐藏第一个左箭头。 - Zach Shallbetter
@ZachShallbetter，是的，这就是我在答案中最后一行所指的意思。很高兴能帮到你。如果这个回答让你的问题得以解决，请不要忘记接受它。 - merv
感谢@user1311103（https://github.com/jann）指出修复逻辑以覆盖两个幻灯片情况的问题。 - merv
1
以下是适用于Bootstrap 3的更新版本代码，可用于指示器操作和同一页中的多个轮播：https://coderpills.wordpress.com/2014/06/05/how-to-hide-carousel-controls-on-first-and-last-items-in-bootstrap-3/ - Fred K
5
在Div中添加属性data-wrap="false"。
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');
    }
});
2

如果您正在寻找适用于同一页上多个走马灯的 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();
    }
});

如果这在你的情况下无法正常工作，请告诉我。

2
1
如果您正在使用Bootstrap 3，请使用以下内容。
$('.carousel').carousel({
  wrap: false
});
0
这里发布的代码有两个问题：如果在同一页上有多个轮播，它将无法正常工作；如果单击指示点，它也无法正常工作。此外，在Bootstrap 3中，事件名称已更改。

下面的代码是此代码的更新版本。在这里，您可以找到更详细的解释。

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);
由于您在代码中使用了一个ID，因此它也无法在同一页上运行多个轮播。 - Karl Adler
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接