更改Jssor Slider中的幻灯片集

Question

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 to load a different set of images and remove the first.

So far I've tried to hide the images I'm not using, etc. I was able to do this, except the thumbnails are still there and load blank slides where I hid the images.

How do you change the slide set without loading three sliders into the page?

Thanks for any help.

Answer 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><img u="image" src2="url" /></div>

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

Answer 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">
  <li class="col-xs-3 col-md-3">
     <div class="thumbnail">
         <img id="workone" src="imageone.jpg" alt="" width="300px" height="250px"> 
     </div>
  </li>      
  <li class="col-xs-3 col-md-3">
     <div class="thumbnail">
        <img id="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

<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 600px; height: 500px; overflow: hidden;">
<div style="display: none;">
   <img id="imageone" data-u="image" src="img/01.jpg" />
</div>
<div style="display: none;">
  <img id="imagetwo" data-u="image" src="img/02.jpg" />
</div>
<div style="display: none;">
    <img id="imagethree" data-u="image" src="img/03.jpg" />
</div>
<div style="display: none;">
<img id="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