Jssor slider - How do I destroy and recreate Jssor slider with different content

Question

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?

Answer 1

Expanding on to the approach by @Kai150...

1. Gather the original HTML code to build the JSSOR slider. Essentially everything inside the <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>
2. Eliminate all tabs and EOL (End Of Line) characters. You can usually do this with a decent code editor, such as Notepad++. (For Notepad++, go to Edit -> Blank Operations -> Remove Unnecessary Blank and EOL.)
3. Store this long HTML code into a string, such as var originalHTML = '...'. Be careful to use single quotes, and that all the original HTML code uses double quotes (or vice versa).
4. Remove the old object: $('#slider1_container').remove();
5. Build the new HTML, starting with the original: $('body').append(originalHTML);
6. Make modifications as necessary. For example, to add slides: $('#slider1_container div').first().append(newSlideHTML); where newSliderHTML is minified HTML code to build another slide.
7. Initialize the slider: 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);
}

Answer 2

Please simply remove the slider container.

$("#slider1_container").remove();

Answer 3

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.