Change Slide Set In Jssor Slider

I have a website with a JSSOR Slider and three icons below it. When I click on an icon I need it to load a certain set of images in the slider. When I click on another icon, I need

Solution 1:

Yes, you can refresh content of any slide manually. See jssor slider: How to reload/refresh the slider to show new images

But in this manner, you can not refresh thumbnails. As there are thumbnails of every slider, The best way is to load 3 sliders at the beginning with lazy loading manner, show 1 and hide another 2.

Use following format (src2="url") to define lazy loading slide,

<div><imgu="image"src2="url" /></div>

Btw, not sure if the nested slider (3 child sliders in a main slider) meet your needs.

Solution 2:

The question has been asked long time back but I recently came across a similar problem where I want to click on an image and load a set of images for slider and one clicking another image, load another set of slider. this is what I did and it worked for me and hence sharing as it can benefit others.

<ul class="row">
  <liclass="col-xs-3 col-md-3"><divclass="thumbnail"><imgid="workone"src="imageone.jpg"alt=""width="300px"height="250px"></div></li><liclass="col-xs-3 col-md-3"><divclass="thumbnail"><imgid="worktwo"src="imagefour.jpg"alt=""width="300px"height="250px"></div></li></ul>

On clicking workone I want to load a page slider.html that has a jssor slider with a set of images and on clicking worktwo, I want to load another set of images for the same slider. The javascript for this html is

$(document).ready(function() {
    $('#workone').click(function()
    {
        localStorage.setItem('set', 1);
      window.location = "slider.html"; 
    });
    $('#worktwo').click(function() {
        localStorage.setItem('set', 2);
      window.location = "slider.html";          
    });
}); 

I added an id to the image divs in the jssor slider code. Something like this

<divdata-u="slides"style="cursor: default; position: relative; top: 0px; left: 0px; width: 600px; height: 500px; overflow: hidden;"><divstyle="display: none;"><imgid="imageone"data-u="image"src="img/01.jpg" /></div><divstyle="display: none;"><imgid="imagetwo"data-u="image"src="img/02.jpg" /></div><divstyle="display: none;"><imgid="imagethree"data-u="image"src="img/03.jpg" /></div><divstyle="display: none;"><imgid="imagefour"data-u="image"src="img/04.jpg" /></div>

and than changed the image set in javascript with the below code.

 $(document).ready(function() {
    x = localStorage.getItem('set');
    console.log(x);
    if (x === '2')
    {
    $('#imageone').attr('src','img/05.jpg');        
      $('#imagetwo').attr('src','img/06.jpg');
      $('#imagethree').attr('src','img/07.jpg');
      $('#imagefour').attr('src','img/08.jpg');

     } })

This worked perfectly fine for me