如何在第一个周期停止引导轮播

问题描述 投票:0回答:1

我希望滑块开始滑动,并且它应该在幻灯片/轮播的第一张图像上的第一个周期停止。

var imgCount = 3;
$('#myCarousel').carousel({
    interval: 2500
});
$('#myCarousel').bind('slid',function(){
    imgCount--;
    if(imgCount == 3)
        $('#myCarousel').carousel('pause');  
});

我也尝试过以下代码。

$('#myCarousel').carousel({
    interval: 2500
});
$('#myCarousel').bind('slid',function(){
    var count = 3;

    count--;
    if(count == 0)
    {

        slide.stopAutoPlay();
    }

});

由于某种原因它不起作用。我在引导脚本文件源之后立即使用 stript 标签。

javascript jquery twitter-bootstrap
1个回答
3
投票

换行选项用于在第一个周期停止轮播。但完成后它仍保留在最后一页。

<div id="carousel-example" class="carousel slide" data-ride="carousel" data-wrap="false">

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

如果您希望它停止在特定的幻灯片计数,此代码将帮助您实现这一目标

var count = 1;

$('.carousel').carousel();
$('.carousel').on('slid.bs.carousel', function () {
    count--;
    if (count <= 0) {
        $('.carousel').carousel('pause');
    }
});

{编辑}

此外,如果您想重置轮播的位置并在停止后移至第一页,请在暂停后添加此

var count = 1;

$('.carousel').carousel();
$('.carousel').on('slid.bs.carousel', function () {
    count--;
    if (count <= 0) {
        $('.carousel').carousel('pause');
        // Reset the carousel position
        setTimeout(function () {
            $('.carousel').carousel(0);
        }, 200);
    }
});

您需要设置一个超时以允许转换完成,否则轮播在完成后可能会出现故障。

© www.soinside.com 2019 - 2024. All rights reserved.