如何在bxslider控件中添加非活动类？

Question

如果是第一个滑块，我需要在prev中添加class，如果是滑块的末尾，我需要添加next。

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

https://jsfiddle.net/uewLafk1/

Answer 1

根据bxSlider插件的documentation，每次转换后都会触发onSlideAfter回调。此外，它还有getCurrentSlide和getSlideCount的方法。

使用所有这三个，您可以执行以下操作：

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

小提琴：https://jsfiddle.net/kbfdebzg/