How can I add inactive class in bxslider control?

Question

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/

Answer 1

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/