javascript - 将事件字幕类添加到当前字幕

我找到了这个小提琴，并对其进行了一些修改（添加了控件和寻呼机）。现在，当您单击prev / next或pager（1,2,3等）时，我想将活动类添加到当前字幕。

here is a fiddle link

$('.bxslider').bxSlider({
        mode: 'fade',
        captions: false,
        controls: true,
        pager: true,
        auto: true,
        speed: 1000,
        onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
            console.log(currentSlideHtmlObject);
            $('.active-caption').removeClass('active-caption');
            $(currentSlideHtmlObject).prev().addClass('active-caption')
        },
        onSlideNext: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
            console.log(currentSlideHtmlObject);
            $('.active-caption').removeClass('active-caption');
            $(currentSlideHtmlObject).next().addClass('active-caption')
        },
        onSliderLoad: function () {
            $('#bxsliderCaption>ul>li').eq(0).addClass('active-caption')
       },

        // http://bxslider.com/options

    });

最佳答案

好的，当滑块本身更改或用户单击上一页/下一页或寻呼机上的数字之一时，这将使活动字幕自动更改。

$(document).ready(function () {
var myCount = 1;
var backwardsCount = 2;

$('.bxslider').bxSlider({
    mode: 'fade',
    captions: false,
    controls: true,
    pager: true,
    auto: true,
    speed: 1000,
    onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
        console.log(currentSlideHtmlObject);
        $('.active-caption').removeClass('active-caption');
                    $('#bxsliderCaption>ul>li').eq(backwardsCount).addClass('active-caption');
        backwardsCount--;
        if(backwardsCount < 0)
            backwardsCount = 2;
    },
    onSlideNext: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
        console.log(currentSlideHtmlObject);
        $('.active-caption').removeClass('active-caption');
        $('#bxsliderCaption>ul>li').eq(myCount).addClass('active-caption');
        myCount++;
        if(myCount > 2)
            myCount = 0;
    },
    onSliderLoad: function () {
        $('#bxsliderCaption>ul>li').eq(0).addClass('active-caption');
   },

    // http://bxslider.com/options

});
});

关于javascript - 将事件字幕类添加到当前字幕，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31789945/