javascript - Bx-slider 多个 slider 自定义控件

Question

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

<div class="slider">
    <a class="prev" href="#">prev</a>
    <ul>
       <li>Slide 1</li>
       <li>Slide 2</li>
    </ul>
    <a class="next" href="#">next</a>
</div>

<div class="slider">
    <a class="prev" href="#">prev</a>
    <ul>
       <li>Slide 1</li>
       <li>Slide 2</li>
    </ul>
    <a class="next" href="#">next</a>
</div>

Answer 1

您可以将 slider 列表保存在一个数组中。每当您的自定义控件被点击时，您都可以找到最接近的“.bxslider”类，并在整个页面中找到它的索引。使用该索引，您可以从数组中调用 slider 对象并调用上一个或下一个事件。

  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