jssor and display image acording responsiveness

Question

I have a jssor slider that uses two images, one for desktop and another for mobile. The desktop image uses a bootstrap hidden-xs class so it hides on mobile

The problem is that jssor takes the first image, the one for desktop and looks bad on mobile (too short in height)

I want jssor to respect hidden-xs so it takes second image

This is because desktop and mobile image uses different height

<div id="jssor1">
   <div data-u="slides">
      <div>
         <img data-u="image" src="image1" class="hidden-xs" />
         <img data-u="image" src="image2" class="hidden-sm hidden-md hidden-lg" />
      </div>

      /* more divs */

   </div>
</div>

Answer 1

Please remove data-u="image", set size and position manually.

Then you can show image1 for desktop, show image2 for mobile.

Use $ScaleSize to scale slider, thus you can scale slider to different size on mobile and desktop