Bxslider: reload on multiple sliders

Question

I have a page with multiple bxSlider and, when the user clicks a button, every slider needs to be reloaded with new images. Everything works fine when I have a single slider, but it stops working with more than one slider. When the reloadSlider() method is called I get a "$(...).reloadSlider is not a function" error.

Since the sliders are dynamically created (I don't know how many of them I'll have on the page), I can't create every single slider on like this:

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

But I need to create them all at once with:

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

But when I try to call $('.slider').reloadSlider(), I get the error above.

Can someone help me? Thank you.

Answer 1

I had the same issue and i come up with this. You can initially load all sliders in array like:

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

Then, you can loop through and reload each

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

Answer 2

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

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

Answer 3

I ran into a similar problem.

The slider was initialized and attached to an object:

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

Later from a different method calling someObj.slider.reloadSlider() didn't work but someObj.slider.data('bxSlider').reloadSlider() did.

Hope this helps..