Question

我正在使用bx-slider插件在单个页面上构建多个滑块。每个滑块都有一个与之关联的类名和自定义上一个/下一个按钮。请注意，它们并不是唯一的。这是因为页面是动态的。我对如何启动滑块感到困惑，因此自定义next / prev按钮仅切换最靠近按钮的幻灯片。这就是我的想法：

{{1}}

Answer 1

您可以将滑块列表保存在数组中。只要单击自定义控件，就可以找到最接近的“.bxslider”类，并在整个页面中找到它。使用该索引，可以从数组中调用滑块对象并调用prev或next事件。

  var slider_array = new Array();
  $('.bxslider').each(function(i){
     slider_array[i] = $(this).bxSlider({controls:false});
  });


  $('.bxslider-controls a').bind('click', function(e) {
  e.preventDefault();

  if($(this).hasClass('pull-left')) {
      var obj = $(this).parent().parent().find('.bxslider');
      var index = $('.bxslider').index(obj);
      slider_array[index].goToPrevSlide();  


  } else if($(this).hasClass('pull-right')) {
    var obj = $(this).parent().parent().find('.bxslider');
      var index = $('.bxslider').index(obj);
      slider_array[index].goToNextSlide();  
  }

});

为此http://jsfiddle.net/atgshbnv/

添加了jsfiddle

Bx滑块多个滑块自定义控件

1 个答案: