Question

我想知道如何使无限自动滚动停止，当点击右箭头时，它将显示每页不是每个项目？

$('.carousel.carousel-multi .item').each(function () {
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().attr("aria-hidden", "true").appendTo($(this));

    if (next.next().length > 0) {
        next.next().children(':first-child').clone().attr("aria-hidden", "true").appendTo($(this));
    }
    else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});

此处是演示https://codepen.io/ygoex/pen/meeaGw

的链接

Answer 1

如果您不想要无限自动滚动，请添加以下内容：

数据间隔=＆＃34;假＆＃34;

只需这样做：

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">

这是一个有效的解决方案。希望它有所帮助！

以下是工作解决方案的链接： http://codepen.io/HenryGranados/pen/KWLweQ

Answer 2

要停止无限自动滚动，您可以在js：

中使用此代码

$('#myCarousel').carousel({
pause: true,
interval: false

}）;

Inside Bootstrap“carousel-inner”类具有“item”，其默认为全宽，表现为类似块，因此您可以在页面中放置想要显示的项目并使用“col-”控制它用于设计响应的类。

项目轮播引导

2 个答案: