自动播放时 twitter-bootstrap 轮播导航和内容不同步

Posted 2023-05-09

【中文标题】自动播放时 twitter-bootstrap 轮播导航和内容不同步

【英文标题】：twitter-bootstrap carousel nav and content are not synchronized when autoplay

【发布时间】：2014-04-21 03:13:02

【问题描述】：

我找到了一个用于 twitter-bootstrap 的 sn-p 来制作带有选项卡式导航的轮播。 除了“自动播放”之外，一切正常。

我想让轮播自动滑动，所以我用data-interval="1000"指定了轮播的时间间隔

问题：轮播导航选项卡与幻灯片不同步。幻灯片按预期制作动画，但选项卡保持不变。

有没有一种简洁的方法可以让标签与幻灯片同步变化？

演示： http://jsfiddle.net/35DGj/

感谢您的帮助

【参考方案1】：

您必须使用'slid.bs.carousel' 事件。

小提琴：http://jsfiddle.net/35DGj/1/

JS：

$(document).ready(function(ev)
    $('#custom_carousel .controls a').on('click',function()
        $('#custom_carousel .controls li.active').removeClass('active');
        $(this).parent('li').addClass('active');
    );
    $('#custom_carousel').on('slid.bs.carousel',function()
            var j = $('.carousel-inner .item.active').index();
            $('.controls .nav li').removeClass('active').eq(j).addClass('active');
    );
);

SpidrJeru 解决方案： 编辑

替代方案：

JS

 $(document).ready(function(ev)
    $('#custom_carousel').on('slide.bs.carousel', function (evt) 
      $('#custom_carousel .controls li.active').removeClass('active');
      $('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
    )
);

两种解决方案的效果完全相同。

【讨论】：

这成功了！谢了哥们。对不起，我没有足够的代表来拍拍你的背:(

TheLittlePig 解决方案就像一个魅力，但我最终使用了另一种解决方案（在上面的编辑中）。我只是觉得它更干净了。