将活动标题类添加到当前标题

Question

我发现了这个小提琴，并对其进行了一些修改（添加了控件和寻呼机）。现在当你点击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 

    });

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 

});
});