多个幻灯片上的公共方法 bxslider

我有多个幻灯片，我使用以下代码：

var demo = $('.demo').bxSlider({
mode: 'horizontal',
captions: false,
touchEnabled: true,
controls: false,
pager:false
});

$('.slider-next').click(function(){
demo.goToNextSlide();
return false;
});

$('.slider-prev').click(function(){
demo.goToPrevSlide();
return false;
}); 

但它不起作用...任何人都知道为什么会这样？

Thanks!

我遇到了同样的问题，但我通过使用解决了each选择器和对象数组。 有很多的parent().parent().parent()但它有效！

请注意，我正在使用自定义next and prev链接，它们必须位于滑块容器之外。

看看我的脚本http://jsfiddle.net/33Jjr/1/ http://jsfiddle.net/33Jjr/1/

HTML

<div class="category-slider"> 
<a href="" class="prev">prev</a>  
<a href="" class="next">next</a> 
  <ul>
    <li><img src="http://placehold.it/350x150&text=FooBar1" /></li>
    <li><img src="http://placehold.it/350x150&text=FooBar2" /></li>
    <li><img src="http://placehold.it/350x150&text=FooBar3" /></li>
  </ul>
</div>

<div class="category-slider"> 
<a href="" class="prev">prev</a>  
<a href="" class="next">next</a> 
  <ul>
    <li><img src="http://placehold.it/350x150&text=FooBar7" /></li>
    <li><img src="http://placehold.it/350x150&text=FooBar8" /></li>
    <li><img src="http://placehold.it/350x150&text=FooBar9" /></li>
  </ul>
</div>

和 JavaScript

var swipes = []
$('.category-slider > ul').each(function (i, obj) {
swipes[i] = $(this).bxSlider({
    mode: 'horizontal',
    slideWidth: 200,
    minSlides: 3,
    maxSlides: 3,
    moveSlides: 1,  
    slideMargin: 0,
    pager: false,
    controls:false
})

$(this).parent().parent().parent().find('.prev').on('click', function (e) {
    e.preventDefault()
    swipes[i].goToPrevSlide()
})

$(this).parent().parent().parent().find('.next').on('click', function (e) {
    e.preventDefault()
    swipes[i].goToNextSlide()
  })
});