在bxslider中，我想在当前幻灯片上添加一个类

我想在当前可见的幻灯片上添加一个额外的类，我没有太多关于jquery的知识，我正在通过以下代码来尝试它。

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

Answer 1

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('
Slide index ' + currentSlide + ' of ' + totalSlides + ' total slides has completed.'); } }); 

Answer 2

要在第一个可见幻灯片上添加类，您必须调用onSliderLoad。 然后使用onSlideAfter调用继续添加和删除active-slide类。

 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/

Answer 3

这里是：

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

Answer 4

它100％工作

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