CODEWITHSUNDEEP
javascriptjqueryaddclassbxslider
Jows
Jows

Reputation: 897

How can I add inactive class in bxslider control?

I need to add class inactive in prev if first slider and for next if end of the slider.

 $('.bxslider').bxSlider({
      nextSelector: '#slider-next',
      prevSelector: '#slider-prev',
      nextText: 'Nex →',
      prevText: '← Prev',
      infiniteLoop: false,
    });

https://jsfiddle.net/uewLafk1/

Upvotes: 1

Views: 215

Answers (1)

Baher Ramzy
Baher Ramzy

Reputation: 171

According to the documentation for the bxSlider plugin, there's an onSlideAfter callback which triggers after every transition. In addition, it has methods for getCurrentSlide and getSlideCount.

Using all of these three, you can do the following:

var slider = $('.bxslider').bxSlider({
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
nextText: 'Next →',
prevText: '← Prev',
infiniteLoop: false,
onSlideAfter: function() {
   if (slider.getCurrentSlide() == 0)
     // First slide
     $('#slider-prev').addClass('inactive');
   else if (slider.getCurrentSlide() == slider.getSlideCount() - 1)
     // Last slide
     $('#slider-next').addClass('inactive');
   else
     $('#slider-next, #slider-prev').removeClass('inactive');
  }
});

Fiddle: https://jsfiddle.net/kbfdebzg/

Upvotes: 1

Related Questions