I'm trying to use Jssor slider to show different HTML content depending on selected category and its subcategory. I successfully created content slider for one subcategory, but I can't figure out how can I destroy my current slider and recreate it with different content loaded with Ajax. Item count differs in subcategories, so as I understand - changing current slides is not an option.
So, my question is - how do I destroy current Jssor slider and make way for a new one?
Expanding on to the approach by @Kai150...
<div id='slider1_container'>. If you want, you could leave the initial slides container div empty, so you can dynamically build the slide deck from scratch: <div id ="slider1_slides" u="slides" ...></div>var originalHTML = '...'. Be careful to use single quotes, and that all the original HTML code uses double quotes (or vice versa).$('#slider1_container').remove();$('body').append(originalHTML);$('#slider1_container div').first().append(newSlideHTML); where newSliderHTML is minified HTML code to build another slide.new $JssorSlider$('slider1_container', options); All this can be wrapped into some basic functionality through a script. Here's some sample functional code, using the thumbnail-5 version, where you call refreshSlider with an array of image objects:
var originalHTML = '<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 456px; background: #24262e; overflow: hidden;"> <!-- Slides Container --> <div id ="slider1_slides" u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;"> </div> <!-- Arrow Navigator Skin Begin --> <style> /* jssor slider arrow navigator skin 05 css */ /* .jssora05l (normal) .jssora05r (normal) .jssora05l:hover (normal mouseover) .jssora05r:hover (normal mouseover) .jssora05ldn (mousedown) .jssora05rdn (mousedown) */ .jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn { position: absolute; cursor: pointer; display: block; background: url(js/jssor/a17.png) no-repeat; overflow:hidden; } .jssora05l { background-position: -10px -40px; } .jssora05r { background-position: -70px -40px; } .jssora05l:hover { background-position: -130px -40px; } .jssora05r:hover { background-position: -190px -40px; } .jssora05ldn { background-position: -250px -40px; } .jssora05rdn { background-position: -310px -40px; } </style> <!-- Arrow Left --> <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 123px; left: 8px;"> </span> <!-- Arrow Right --> <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 123px; right: 8px"> </span> <!-- Arrow Navigator Skin End --> <!-- Thumbnail Navigator Skin Begin --> <div u="thumbnavigator" class="jssort05" style="position: absolute; width: 600px; height: 100px; left:0px; bottom: 0px;"> <!-- Thumbnail Item Skin Begin --> <style> /* jssor slider thumbnail navigator skin 05 css */ /* .jssort05 .p (normal) .jssort05 .p:hover (normal mouseover) .jssort05 .pav (active) .jssort05 .pav:hover (active mouseover) .jssort05 .pdn (mousedown) */ .jssort05 .f { clip: rect(8px 63px 63px 8px); } .jssort05 .i { position: absolute; background: #000; filter: alpha(opacity=30); opacity: .3; width: 72px; height: 72px; top: 0; left: 0; transition: background-color .6s; -moz-transition: background-color .6s; -webkit-transition: background-color .6s; -o-transition: background-color .6s; } .jssort05 .pav .i { background: #fff; filter: alpha(opacity=80); opacity: .8; } .jssort05 .pdn .i { background: none; } .jssort05 .p:hover .i, .jssort05 .pav:hover .i { background: #fff; filter: alpha(opacity=30); opacity: .3; } .jssort05 .p:hover .i { transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none; } </style> <div u="slides" style="cursor: move;"> <div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;"> <div class="o" style="position:absolute;top:1px;left:1px;width:72px;height:72px;overflow:hidden;"> <ThumbnailTemplate class="b" style="width:72px;height:72px; border: none;position:absolute; TOP: 0; LEFT: 0;"></ThumbnailTemplate> <div class="i"></div> <ThumbnailTemplate class="f" style="width:72px;height:72px;border: none;position:absolute; TOP: 0; LEFT: 0;"></ThumbnailTemplate> </div> </div> </div> <!-- Thumbnail Item Skin End --> </div> <!-- Thumbnail Navigator Skin End --> </div>';
function createSlideDeck(images) {
$.each(images, function(i,e) {
createSlide(e);
});
}
function createSlide(img) {
$div = $('<div><div>');
$div.append($('<img u="image" src="'+img.src+'" />'))
.append($('<img u="thumb" src="'+img.src+'" />'));
$('#slider1_slides').append($div);
}
function refreshSlider(images) {
$('#slider1_container').remove();
$('body').append(originalHTML);
createSlideDeck(images);
jssor_slider1 = new $JssorSlider$('slider1_container', options);
}
I had the same requirement and after some head scratching got it to work (for my requirements at least).
Using .remove() method removes the selected element(s) and its child elements. Which removed all the slide markup inside this element.
As such when calling this, I needed to create and populate the basic child elements (again) and append to the container. $("#slider1_container").append(theOriginalHtmlMarkup).
Having done this I was able to repopulate the slider with the newly fetched data.
The old slider is still in ghosting mode and not really removed. A destroy() function is not added yet. The slider needs a $Pause and any event is to unbind before refreshing.
https://github.com/jssor/slider/issues/98
Don't try - it is mad. I thought that everything was solved until I used the keyboard for navigation. Without a destroy method I would not recommend to do it this way and leave uncollected garbage.
