BX滑块。在以前的幻灯片中添加和删除类

Question

我正在尝试为当前幻灯片之前的每个幻灯片导航项目添加一个类。

现在，如果单击下一个按钮，它会添加一个类。但是，我无法弄清楚如何在单击上一个按钮时删除该类。

的内容

$(document).ready(function($) {

    slider = $('.slider').bxSlider({

    onSlideBefore: function(){

     var current = slider.getCurrentSlide();
      if (slide-data-index <= current) {
        $('.bx-pager .bx-pager-item a').addClass('past');
      } else {
        $('.bx-pager .bx-pager-item a').removeClass('past');
    }
});

这是我迄今为止所做的工作：http://jsfiddle.net/mreee/xVnQY/

我无法弄清楚为幻灯片分配变量

Answer 1

我不明白的一件事是为什么你的CSS，HTML和jQuery彼此不一致。您在CSS和jQuery中引用的类或元素在HTML中没有。我只是猜测你没有粘贴完整的HTML。

无论如何，我检查了你的代码并为你发布了一个更简单易懂的解决方案。我没有在HTML / CSS中做任何改动所以我只会粘贴jQuery。此外，我在小提琴外部引用了 bxslider JS file ，您可以在左侧窗格中看到。

这是对外部bxslider文件的引用。

  

http://bxslider.com/lib/jquery.bxslider.min.js

的的jQuery 的

jQuery(document).ready(function () {
    $('.slider').bxSlider({
        mode: 'horizontal',
        speed: 500,
        pager: true,
        controls: true,
        auto: false,
        infiniteLoop: false,
        hideControlOnEnd: true,
        onSlideNext: function () {
            $('.slider h3').addClass('blueylooey');
        },
        onSlidePrev: function () {
            $('.slider h3').removeClass('blueylooey');
        }  
    });

});

这是Working Demo