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,

Answer 1

Expanding on to the approach by @Kai150...

1. Gather the original HTML code to build the JSSOR slider. Essentially everything inside the
   . If you want, you could leave the initial slides container div empty, so you can dynamically build the slide deck from scratch:
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 = '
  
 
             
   
 
 
  
  
 
 
  
    
';

function createSlideDeck(images) {
    $.each(images, function(i,e) {
        createSlide(e);
    });
}

function createSlide(img) {
    $div = $('
');
    $div.append($(''))
        .append($(''));
    $('#slider1_slides').append($div);
}

function refreshSlider(images) {
    $('#slider1_container').remove();
    $('body').append(originalHTML);
    createSlideDeck(images);
    jssor_slider1 = new $JssorSlider$('slider1_container', options);
}