在幻灯片末尾停止 Twitter Bootstrap Carousel

Posted 2023-02-16

【中文标题】在幻灯片末尾停止 Twitter Bootstrap Carousel

【英文标题】：Stop Twitter Bootstrap Carousel at the end of it's slides

【发布时间】：2012-07-11 14:12:05

【问题描述】：

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

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

【参考方案1】：

您可以在页面中添加一些代码以在 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. 上使用的标记

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

【讨论】：

它似乎对轮播没有任何影响。 pastebin.com/88dSYwcD希望我有更多的信息，但我有点不知所措。

@ZachShallbetter 与 Bootstrap 示例不同，您的控制元素嵌套得更深一些。将我的代码从 $this.children(...) 更改为 $this.find(...) 应该让它为你工作。 children 只返回第一级下的后代，而 find 将返回所有后代。最后，我建议使用比我在答案中给出的示例代码更窄的选择器。

非常好，效果很好。我想我最初也需要隐藏第一个左箭头。

@ZachShallbetter，是的，这就是我回答中最后一行的意思。很高兴它有帮助。如果这对您有用，请不要忘记接受答案。

这里是 Bootstrap 3 代码的更新版本，它也适用于指标操作和同一页面中的多个轮播：coderpills.wordpress.com/2014/06/05/…

【参考方案2】：

最简单的方法如下：

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

【参考方案3】：

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

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

将wrap 选项设置为false 会告诉轮播自动停止循环浏览幻灯片。我希望这能正确回答您的问题。

【讨论】：

感谢它今天在我的一个网站项目中帮助我。

【参考方案4】：

此处发布的代码有两个问题：如果您在同一页面上有多个轮播，则无法使用；如果您单击指示点，则无法使用。此外，在 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);

【讨论】：

由于您在代码中使用了 ID，因此它也不适用于同一页面上的多个轮播。

【参考方案5】：

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

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

【参考方案6】：

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

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

【参考方案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();
    
);

如果这不适用于您的情况，请现在告诉我。

【参考方案8】：

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