Javascript 使用jQuery数据检测活动的幻灯片和运行功能

您好，我正在使用jQuery进行自定义导航，但我无法确定如何检测活动幻灯片并将活动状态应用于该幻灯片的按钮

我设置了一个JSFIDLE来更好地显示我要做的事情，基本上与滑块中的dots/pager功能相同，只是在按钮1、2和3上

我是jQuery.data部分的新手：p

您可以向单击的按钮添加类，并将其从单击事件中的其他按钮中删除：

$('.number').on('click', function(e) {
    e.preventDefault();
    var index = $(this).attr('data-slider');

    $('.number').removeClass('active'); //Remove class active from all buttons
    $(this).addClass('active'); //Add active class to the clicked one

    Slider.goToSlide(index);
});

由于您试图使与幻灯片相关的按钮处于活动状态，因此可以使用

onSlideBefore（）

回调以

add/remove

基于

data slider

将活动类添加到按钮：

Slider = $('.slider').bxSlider({
  pager: true,
  onSlideBefore: function($slideElement, oldIndex, newIndex) {
      $('.number').removeClass('active');
      $('.number[data-slider="'+newIndex+'"]').addClass('active');
  }
});

---

Hoep这很有帮助。

是否要自定义“上一页/下一页”按钮？如果是这样，您可以通过调用

getCurrentSlide（）

来获取当前（“活动”）页面。查看上的文档以了解详细信息。 如果您只想在幻灯片之外进行导航控制，bxslider页面上有一个示例：

尝试：

var Slider;
var minState = 0;
var maxState = 2;
var currState = 0;

$(document).ready(function() {
  Slider = $('.slider').bxSlider({
    pager: true
  });

  var changeActiveLink = function() {
    $('.active').removeClass('active');
    $('.number[data-slider='+currState+']').addClass('active');
  }
  $('.number').on('click', function(e) {
    e.preventDefault();
    var index = $(this).attr('data-slider');
    Slider.goToSlide(index);
    currState = index;
    changeActiveLink();
  });
  $('.bx-pager-link').on('click', function(e){
    e.preventDefault();
    var activeButton = $(this).data('slide-index');
    currState = activeButton;
    changeActiveLink();
  });
  $('.bx-next').on('click', function(e){
    e.preventDefault();
    if(currState == maxState) {
        currState = 0;
    } else {
        currState++;
    }
    changeActiveLink();
  });
  $('.bx-prev').on('click', function(e){
    e.preventDefault();
    if(currState == 0) {
        currState = maxState;
    } else {
        currState--;
    }
    changeActiveLink();
  })

});

---

我正在尝试了解如何使用data current=“1”>将当前类添加到按钮1等等：-/我想到了这一点，但当您使用点之类的滑块控件时，它不会变为活动状态。我尝试让我的按钮以相同的方式变为活动状态。点不确定问题是什么，但查看更多信息。您指的是显示您的工作，我已更新了我的3小时前回答并拉小提琴，它就开始工作了。对不起@Zakaria Acharki我错过了！！啊，不，如果你看到小提琴，每个幻灯片都有一个按钮，你可以使用onSlideBefore（）/onSlideAfter（）回调来检测幻灯片转换。（如中所述）该函数在参数中有oldIndex/newIndex。：D起作用，几乎除了我使用自定义导航时，我想我可以解决这个问题，尽管L:DOh你厌倦了滑块控件：D@Brendan QuinnYup，所有导航方法现在都应该与所有其他导航方法对话Hank！很好：），嗯，需要更多地查看代码，我不知道如何添加更多幻灯片？基本上，添加幻灯片与之前完全相同，添加一个遵循相同模式的自定义链接（数据滑块=3、4等），然后将var maxState=2更改为幻灯片的最终数量-1，这样就可以了。

Slider = $('.slider').bxSlider({
  pager: true,
  onSlideBefore: function($slideElement, oldIndex, newIndex) {
      $('.number').removeClass('active');
      $('.number[data-slider="'+newIndex+'"]').addClass('active');
  }
});

var Slider;
var minState = 0;
var maxState = 2;
var currState = 0;

$(document).ready(function() {
  Slider = $('.slider').bxSlider({
    pager: true
  });

  var changeActiveLink = function() {
    $('.active').removeClass('active');
    $('.number[data-slider='+currState+']').addClass('active');
  }
  $('.number').on('click', function(e) {
    e.preventDefault();
    var index = $(this).attr('data-slider');
    Slider.goToSlide(index);
    currState = index;
    changeActiveLink();
  });
  $('.bx-pager-link').on('click', function(e){
    e.preventDefault();
    var activeButton = $(this).data('slide-index');
    currState = activeButton;
    changeActiveLink();
  });
  $('.bx-next').on('click', function(e){
    e.preventDefault();
    if(currState == maxState) {
        currState = 0;
    } else {
        currState++;
    }
    changeActiveLink();
  });
  $('.bx-prev').on('click', function(e){
    e.preventDefault();
    if(currState == 0) {
        currState = maxState;
    } else {
        currState--;
    }
    changeActiveLink();
  })

});