jquery - 多个幻灯片上的公共(public)方法 bxslider

Question

我有多个幻灯片，我使用此代码:

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

但它不起作用......有人知道这是为什么吗？

谢谢!

Answer 1

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

注意，我使用自定义 next 和 prev 链接，它们必须位于 slider 容器之外。

看看我的脚本 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()
  })
});