在它的幻灯片结尾处停止Twitter Bootstrap Carousel
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') } 更新：这与“自动播放”无关我特别指的是手动按下左右按钮。
您可以在页面中添加一些代码，以便在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示例轮播上使用了标记。
打开页面时，请务必隐藏左边的一个。
对于旋转木马不能无限循环（使用Bootstrap 3.0.0），并在最后一张幻灯片停止，除非点击“下一个”箭头，以下是最好的方法：
$('.carousel').carousel({ interval: 5000, wrap: false });
将wrap选项设置为false会使轮播停止自动循环滑动幻灯片。 我希望这能正确回答你的问题。
最简单的方法如下：
//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'); } });
在Div中添加属性data-wrap="false"
如果你使用bootstrap 3使用它
$('.carousel').carousel({ wrap: false });
不确定这是否仅与最新版本的Bootstrap相关，但在最外面的转盘容器上设置data-wrap =“false”将阻止它继续通过最终幻灯片。
来源： http ： //getbootstrap.com/javascript/#carousel-options
对于寻找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(); } });
如果这不符合你的情况，请现在就告诉我。
此处发布的代码有两个问题：如果您在同一页面上有多个轮播，则不起作用，如果单击指示点，则无效。 此外，在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);