使用轮播幻灯片制作轮播按钮标签自动滑动

Question

我设置了以下轮播。它使用数据骑行引导功能自动滑动。我希望在幻灯片滚动时更改按钮标签。有谁知道如何实现这个功能？

Answer 1

我通过将函数绑定到幻灯片引导函数来解决此问题。

这是我将幻灯片标签函数绑定到轮播引导幻灯片函数的地方。

            var r = new ComponentCarouselLayout();
            var carousel = $('#carousel-tour');
            carousel.bind('slide.bs.carousel', function () {
                r.slideLabels(carousel);
            });

这是我的幻灯片标签功能，它会更新哪个标签处于活动状态。

slideLabels: function(carousel) {
    var labelItems = $(carousel).closest('.btn-group-carousel').find('#ts-btn-toggles label');
    var labelItem;
    for (var i = 0; i < labelItems.length; i++) {
        labelItem = labelItems[i];
        if ($(labelItem).hasClass("active")) {
            $(labelItem).removeClass("active");
            var start = labelItem;
            var nextLabelItem = labelItems[($.inArray(start, labelItems) + 1) % labelItems.length];
            $(nextLabelItem).addClass("active");
            return false;
        }
    }
}