Bx滑块多滑块自定义控件

Question

我正在使用bx滑块插件在单个页面上构建多个滑块。每个滑块都有一个与其关联的类名和自定义的上一个/下一个按钮。请注意它们不是唯一的。这是因为该页面是动态的。我很困惑如何启动滑块，以便自定义next/prev按钮仅切换最接近按钮的幻灯片。这是我在想什么：

<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

您可以将滑块列表保存在一个数组中。无论何时您点击自定义控件，您都可以找到最接近的'.bxslider'类，并在整个页面中找到它的索引。使用该索引，您可以调用数组中的滑块对象并调用前一个或下一个事件。

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

}); 

新增的jsfiddle此http://jsfiddle.net/atgshbnv/