Currently, I have integrated the JQuery lightSlider into my project. Despite some code adjustments, it is functioning well.
My goal is to dynamically replace the lightSlider content with data returned via AJAX, which I have successfully achieved.
After receiving new data, I call the lightSlider plugin again in the "success" or "done" section of my AJAX function:
var lightsliderstring = "";
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";
}
$("#lightSlider").html(lightsliderstring);
$('#lightSlider').lightSlider({
auto: true,
gallery: false,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 0
});
I notice that calling lightSlider only once does not produce the intended result, possibly due to the dynamic content generation after DOM load. I aim to clear the previous instance of lightSlider after each AJAX call as multiple instances seem to accumulate within the same div.
Initially, the appearance is satisfactory after one lightSlider activation:
https://i.stack.imgur.com/WbRjS.png
However, during the second AJAX call and subsequent instantiation of lightSlider, issues arise such as stacking arrows, misalignment, and duplicating index dots below the image:
https://i.stack.imgur.com/9XqAx.png
To resolve this, a method to clear the initial lightSlider instance is needed.