resetting bxSlider

Question

I took a different direction with a carousel I implemented, opting for bxSlider instead of jCarousel. This is for an image gallery I am building http://rjwcollective.com/equ

Answer 1

I was writing a program which make a bunch of AJAX calls on a timer and displays the results in a bxslider and I also ran into a problem where the bxslider wasn't refreshing.This is how I solved it:

var $slider = null;

And inside the portion of code where you need to initialize or refresh the slider do this:

if ($slider == null) {
    $slider = $('.sliderDashboard').bxSlider({
        slideWidth: 200,
        minSlides: 1,
        maxSlides: 1,
        slideMargin: 10
    });
}
else {
    $slider.reloadSlider();
}

Answer 2

As the website says: you have the slideshowContainer to be attached to a variable in order to use the public functions. As reloadShow() and destroyShow() are public functions, this is the only way to go. Worked perfectly for me. I've simply put a

var $theslideshow = [functionThatCallsYourSlideshow] 

before my function and called afterwards $theslideshow.destroyShow();

hope this helps

Answer 3

Declaring the "mySlider" variable outside the document-ready block solved the problem for me:

var mySlider;
$(function(){
    mySlider= $('#slider').bxSlider({
        auto: true,
        controls: true
    });

    mySlider.reloadShow();
})

Alex