CODEWITHSUNDEEP
ajaxbxslider
Becs Carter
Becs Carter

Reputation: 1250

bxSlider not working on AJAX loaded content

I am using bxSlider on my site. When I select a size from a dropdown menu, I use ajax to get specific content for my slider and input it.

The content is all there, no worries. What doesn't work is my actual slider. So when I click on the arrows, it doesn't move or anything.

On loading the new content into the slider, I call the slider function, but this doesn't work.

Any ideas?

This code below is inserting my ajax content in to the correct element on my page, then calling the slider function.

$('.bxslider').html(po_data.slider);
runslider();

Upvotes: 0

Views: 2787

Answers (1)

Becs Carter
Becs Carter

Reputation: 1250

I solved this for anyone else who is having the same problem. I destroyed the slider, then recalled it again.

var go_slider = null;

function runslider() {

   if (go_slider) {
      go_slider.destroySlider();
   }


   go_slider = $('.bxslider').bxSlider({
      minSlides: 4,
      maxSlides: 4,
      moveSlides: 4,
      slideWidth: 208,
   });

}

Works perfectly! Hope this can help somebody out!

Upvotes: 2

Related Questions