reload, refresh, unbind, destroy, live, javascript/jquery function… how should this be done?

Question

My question title may seem confusing, let explain my situation. Any help would be much appreciated.

---

I have never done this before, hence why I can't pin point a solution in google.

I have a jquery slideshow, which I wrapped inside a function because I have some addition animation to go with it, please see below...

// my slider function
bikeSlider = function () {

    var slider = $('#bike-minislider').bxSlider({

        displaySlideQty: 5,
        infiniteLoop: false,
        hideControlOnEnd: true                      

    });

    $('#bike-minislider-fade').fadeIn();

};

// this runs the function
bikeSlider();

As you can see, immediately after the bikeSlider function, I run the function using... bikeSlider();

Now later on, I hide some slides within the slideshow using jquery .hide() .

Because my jquery slideshow function, calculates the number of visible slides within the #bike-minislider div, it means that the new number of visible slides causes the slideshow to not work. I guess it needs to re-calculate the new number of slides.

In a nutshell, I think this can be resolved by running the bikeSlider(); function again.

So I tried this below, but it did not work.

bikeFilter = function (y) {

    $('.bike').fadeOut();
    $('.bike[data-group=' + y + ']').fadeIn();

    bikeSlider();

    return false;

}

As you can see I am trying to re-run the function bikeSlider(); - but it seems to be running this over the top of the old one, so my question is, how do you remove the original slide function before running it again.

Or reloading/refreshing the original function so it re-calculate the new number slides?

Any pointers would be so helpful.

Thank You.

Answer 1

As i understood you dont need re-create slider, but you do exectly this by calling twice

bxSlider()

According doc you need reinit slider by

reloadShow()
//Reinitialize a slide show

For more info take a look here bxslider in section Public functions

You need to call reloadShow() for slider-object

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

    mySlider.reloadShow();
})