8

有没有办法在没有自动循环的情况下初始化 Twitter Bootstrap Carousel？环境interval: false最初不会循环，但是一旦您单击下一个或上一个，它就会再次开始循环。我根本不希望它循环。

编辑

这是我用来初始化它的 jquery 代码：

$(function() {
    $('#carousel').carousel({interval: false});
});

要在轮播中显示图像：

image_tag('image.png', :'data-target' => '#carousel', :'data-slide-to' => 1)
4

6 回答 6

10

data-interval="false"您可以通过添加到您的.carouseldiv 标记来阻止 Bootstrap 的轮播在页面加载时循环。（我无法获得上述任何一个答案。）

于 2014-04-22T21:40:36.377 回答
6

我认为您正在寻找“数据包装”参数

<div id="crsl1" class="carousel slide" data-ride="carousel" data-wrap="false">
  ...
</div>
于 2014-07-15T21:46:15.237 回答
2 
$(document).ready(function() {      
   $('#carousel').carousel('pause');
});

或者如果仍然不行，试试这个：

$('#carousel').carousel({interval: false});
$(document).on('mouseleave', '#carousel', function() {
    $(this).carousel('pause');
});

重置 mouseleave 事件的暂停。

于 2013-10-20T13:38:59.993 回答
0

试试这个：data-ride="carousel"从轮播中删除并$('#carousel-example').carousel({interval: false})

于 2016-07-05T04:04:05.397 回答
0

我现在忘记了同样简单的细节。这是非常简单的兄弟，但正如我所见，问题仍然悬而未决。所以这里是：

只需在轮播元素的主 div 中添加 data-wrap="false"，

;)

于 2018-09-11T19:08:15.987 回答
0

您可以停止轮播事件并手动控制滑动

$(function() {
    $('#carousel').carousel({interval: false});

    $(document).off('.bs.carousel.data-api');

    $('#carousel a').on('click', function (ev) {
        if ( $(ev.currentTarget).hasClass('right')) {
            $('#carousel').carousel('next');
        }

        if ( $(ev.currentTarget).hasClass('left')) {
            $('#carousel').carousel('prev');
        }
    })
});
于 2015-11-26T08:24:58.310 回答