In bxslider i want to add a class on current slide

Question

I want to add an extra class to the current visible slide, i dont have so much knowledge of jquery i'm trying it by following code.

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

dariodev · Answer 1 · 2018-06-16T09:20:58.377

10

To add class on the first visible slide you have to call onSliderLoad. Then you continue adding and removing active-slide class with onSlideAfter call.

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/

edited Jun 16 '18 at 09:20

answered Aug 20 '13 at 19:02

dariodev

406
7
13

onSliderLoad should have .eq(0) instead of .eq(1) – Jay Dubal Oct 27 '16 at 10:12
No, this is actually just fine. Someone edited my answer and broke it. I returned the original answer because it works properly. Please check before edit https://jsfiddle.net/dariodev/587pqsct/ – dariodev Jun 15 '18 at 23:31

XMen · Accepted Answer · 2012-10-08T05:48:28.570

5

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.');
    }
});

edited Oct 08 '12 at 05:48

answered Oct 05 '12 at 11:29

XMen

29,384
41
99
151

so how would i apply a class to currentSlide, I m sorry i dont know jquery so much. Please tell the full code i need to copy paste. – pixel boon Oct 05 '12 at 12:03
http://jsfiddle.net/mL4xq/1/ this is the code, in JS area first there is code of the plugin and at the bottom there is custom code – pixel boon Oct 05 '12 at 12:27
1

thank you so much xMen but there are few issues, when clicked for next slide the class from the inactive slide should be removed also on the first slide i need the active-slide class. – pixel boon Oct 05 '12 at 13:23
try giving `$('.pager').removeClass('active-slide');` – XMen Oct 08 '12 at 05:48
For latest versions: At http://bxslider.com/options appears the params for onSlideBefore: ($slideElement, oldIndex, newIndex). Not the mentioned in answer. – leticia Mar 25 '14 at 15:36

score 4 · Answer 3 · answered Sep 18 '14 at 08:38

Here it is:

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

score -1 · Answer 4 · edited Apr 11 '17 at 08:49

its 100% working

$(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');
                }
            });

        });

In bxslider i want to add a class on current slide

4 Answers4

Linked