將活動字幕類添加到當前字幕

Question

我找到了這個小提琴，並對其進行了一些修改（添加了控件和尋呼機）。 現在，當您單擊prev / next或pager（1,2,3等）時，我想將活動類添加到當前字幕。

這是一個小提琴鏈接

$('.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 

    });

Answer 1

好的，當滑塊本身更改或用戶單擊上一頁/下一頁或尋呼機上的數字之一時，這將使活動字幕自動更改。

$(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 

});
});