制作旋转木马按钮标签自动滑动与旋转木马幻灯片

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;
        }
    }
}