Javascript 在幻灯片的末尾停止 Twitter Bootstrap Carousel

Stop Twitter Bootstrap Carousel at the end of it's slides

提问by Zach Shallbetter

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.

Bootstrap 轮播是一个奇怪的野兽。我尝试调整 $next 以防止无限循环，但最终要么破坏它，要么阻止幻灯片在到达末尾时向后移动。

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

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

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

采纳答案by merv

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

您可以在页面中添加一些代码以在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();
  }

});

This example assumes the markup used on the Twitter Bootstrap example carousel.

此示例假定Twitter Bootstrap 示例轮播上使用的标记。

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

打开页面时一定要隐藏左边的。

回答by Daniely

For the carousel to not infinitely loop (using Bootstrap 3.0.0), and stop at the last slide unless the "next" arrow is clicked, the following is the best way to do it:

为了使轮播不会无限循环（使用 Bootstrap 3.0.0），并在最后一张幻灯片上停止，除非单击“下一个”箭头，以下是最好的方法：

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

Setting the wrapoption to falsetells the carousel to stop cycling through the slides automatically. I hope this answers your question correctly.

设置wrap选项false告诉轮播自动停止在幻灯片中循环。我希望这能正确回答你的问题。

回答by royalyadnesh

Add attribute data-wrap="false"in Div

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

回答by ryanka

The easiest way to do this is as follows:

最简单的方法如下：

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

回答by Karl Adler

For people looking for a solution for Bootstrap 3working for multiple carouselson same page try this:

对于人们在寻找解决的办法引导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();
    }
});

Please let me now if this is not working in your case.

如果这对您的情况不起作用，请现在告诉我。

回答by Shuhad zaman

if you are using bootstrap 3 use this

如果您使用的是引导程序 3，请使用它

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

回答by DataCat Robin

Not sure if this is only relevent to the newest version of Bootstrap but setting data-wrap="false" on the outermost carousel container will prevent it from proceeding past the final slide.

不确定这是否只与 Bootstrap 的最新版本有关，但在最外面的轮播容器上设置 data-wrap="false" 将阻止它继续通过最后一张幻灯片。

source: http://getbootstrap.com/javascript/#carousel-options

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

回答by Fred K

The codes posted here have two problems: doesn't work if you have more than one carousel on the same page and doesn't work if you click on the indicator dots. Also, in Bootstrap 3the event has changed name.

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

The below code is an updated version of this code. And here you can find a more 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);