如何在 bxslider 控件中添加 inactive class？

Question

我需要添加 class inactive in prev if first slider and for next if the end of slider.

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

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

如何在 bxslider 控件中添加 inactive class？

How can I add inactive class in bxslider control?

javascript

jquery

addclass

bxslider