How can I detect if jQuery lightslider has been instantiated, and how to clear instance if yes

Question

I\'m using JQuery lightSlider. It works pretty well (well, actually, I had to jig the code a little bit, but enough of that for now).

What I am trying to achieve is to d

Answer 1

The $("#lightSlider").empty() or $("#lightSlider").html('') didn't work for some reason. The lightslider instances continued to pile up with every new form submission. I don't know why. Neither did the ("#lightSlider").lightslider().destroy() method seem to work, and that could be for some odd reason that I can't pinpoint, maybe something to do with the way I'm manipulating the DOM, I don't know.

What finally worked was to nest the <ul id="lightSlider">...</ul> block within a <div id="carousel-container">...</div> block. Then, with each new form submission, I deleted the entire #lightSlider block with a $("#carousel-container").html(''); Then I dynamically re-created the entire <ul id="lightSlider">...</ul> with the new, updated content. Here's the working code:

        $("#carousel-container").html('');
        var lightsliderstring = "<ul id=\"lightSlider\">";
        for(i=1;i<thumbsArray.length;i++){
            lightsliderstring     += "<li>\n";
            if( $("#as_feature").val() ){
                lightsliderstring     += "   <h3>" + $("#as_feature").val() + " photo " + i + "</h3>\n";
            }
            lightsliderstring     += "   <img src=\"/" + thumbsArray[i] + "\" />\n";
            lightsliderstring     += "</li>\n";
        }
        lightsliderstring += "</ul>\n";

        $("#carousel-container").html(lightsliderstring);

        $('#lightSlider').lightSlider({
            auto: true,
            gallery: false,
            item: 1,
            loop: true,
            slideMargin: 0,
            thumbItem: 0
        });

Answer 2

Assuming you are using a newer version of lightslider than 1.1.3 you should be able to .destroy() the existing instance as follows:

var slider = $('#lightslider').lightSlider();
slider.destroy();   

For safety, you will need to check the slider is something before you call the destroy method though!