如何在用户点击指示器或走马灯控件时禁用走马灯循环？

Question

使用Bootstrap现成的轮播组件，当用户点击指示器或控制按钮（下一个/上一个）时，我希望禁用自动循环功能。因此，如果用户单击“下一个”按钮，则轮播将变为手动模式。虽然不太擅长jQuery，但这是我的尝试。

$('#myCarousel').click(function() {
    $(this).stop();
});

- alyus

Answer 1

您可以通过轮播的.data()对象访问interval选项，并将其设置为false。

$('#myCarousel').click(function() {
  $(this).data('carousel').options.interval=false;
});

演示: http://www.bootply.com/65091

- Carol Skelly

Answer 2

对于Bootstrap 3，我正在做这样的事情。注意：我的页面的大部分被轮播图覆盖，因此我告诉它不要在悬停时暂停（因为鼠标很可能已经悬停）。

要暂停，当轮播图被点击任何地方（包括指示器）：

$('#myCarousel').click(function () {
        $('#myCarousel').carousel('pause');
});

如果只有在单击指示器时才暂停，代码应该是这样的。对于其他元素也是如此。

$(".carousel-indicators").click(function () {
        $('#myCarousel').carousel('pause');
});

虽然不是问题的直接范围，但这里是我如何防止鼠标悬停时暂停的方法：

$('#myCarousel').carousel({
        pause: "false"
});

- puddleglum