В bxslider я хочу добавить класс на текущий слайд

Я хочу добавить дополнительный класс к текущему видимому слайду, я не так много знаю о jquery, я пробую его, следуя коду.

 $(document).ready(function(){
     $('#slider1').bxSlider({
        pager: 'true'
     });
 $(currentSlide).addClass('active-slide');
     return false;
 });

Ответ 1

http://bxslider.com/options

    var slider=$('#slider1').bxSlider({
     pager: 'true',
   onBeforeSlide: function(currentSlide, totalSlides, currentSlideHtmlObject){
        $('.pager').removeClass('active-slide');   
         $(currentSlideHtmlObject).addClass('active-slide');
 //     $('#sddf').html('<p class="check">Slide index ' + currentSlide + ' of ' + totalSlides + ' total slides has completed.');
    }
});

Ответ 2

Чтобы добавить класс на первый видимый слайд, вы должны вызвать onSliderLoad. Затем вы продолжаете добавлять и удалять класс active-slide с помощью вызова onSlideAfter.

onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
    $('.active-slide').removeClass('active-slide');
    $('.bxslider>li').eq(currentSlideHtmlObject + 1).addClass('active-slide')
},
onSliderLoad: function () {
    $('.bxslider>li').eq(1).addClass('active-slide')
},

https://jsfiddle.net/dariodev/587pqsct/

Ответ 3

Вот он:

$('#slider1 ul').bxSlider({
    pager: 'true',
    onSliderLoad: function(currentIndex) {     
      $('#slider1').find('.bx-viewport').find('ul').children().eq(currentIndex + 1).addClass('active-slide');
    },
    onSlideBefore: function($slideElement){
      $('#slider1').find('.bx-viewport').find('ul').children().removeClass('active-slide');
      $slideElement.addClass('active-slide');
    }
});

JSFiddle

Ответ 4

работает на 100%

$(document).ready(function(){
            $('.bxslider1').bxSlider({
                slideWidth: 280,
                slideMargin: 20,
                useCSS: false,
                autoHover: false,
                speed: 2000,
                oneToOneTouch: true,
                pager: 'true',
                onSliderLoad: function(currentIndex) {     
                  $('.bxslider1').find('.bx-viewport').find('ul').children().eq(currentIndex + 1).addClass('active-slide');
                },
                onSlideBefore: function($slideElement){
                  $('.bxslider1').find('.bx-viewport').find('ul').children().removeClass('active-slide');
                  $slideElement.addClass('active-slide');
                }
            });

        });