Bxslider：重载多个滑块

Question

我有一个包含多个bxSlider的页面，当用户单击一个按钮时，每个滑块都需要重新加载新图像。 当我有一个滑块时，一切正常，但它停止使用多个滑块。 调用reloadSlider()方法后，我收到"$(...).reloadSlider is not a function"错误。

由于滑块是动态创建的（我不知道我在页面上会有多少个），我无法像这样创建每个滑块：

var slider1 = $('#slider1').bxSlider();
var slider2 = $('#slider2').bxSlider();
...

但我需要一次创建它们：

$('.slider').bxSlider();

但是当我尝试拨打$('.slider').reloadSlider()时，我收到上述错误。

有人能帮助我吗？ 谢谢。

Answer 1

我有同样的问题，我想出了这个。 您最初可以在数组中加载所有滑块，如：

var sliders = [];
$('.sliders').each(function(i,item){
  var slider;
  slider.$(this).bxSlider();
  sliders[i] = slider;
});

然后，您可以循环并重新加载每个

$(sliders).each(function(){
    this.reloadSlider();
});

Answer 2

var sliders = $('.slider').map(function() {
  return $(this).bxSlider();
});

sliders.each(function() {
  this.reloadSlider();
});

Answer 3

我遇到了类似的问题。

滑块已初始化并附加到对象：

someObj.slider = $('.slider').bxSlider({...})。

后来从一个不同的方法调用 someObj.slider.reloadSlider()无效，someObj.slider.data('bxSlider').reloadSlider()无效。

希望这会有所帮助..