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/