Demo 7: Use high resolution images when slider is fullscreen

You can use low-resolution (small file size) images for the image slider and configure it to display high-resolution (large file size) images when the slider is enlarged to fullscreen mode.

Simply add the high-resolution image to the slide using the data-fs-image attribute:

<a class="ns-img" href="img/a_s.jpg" data-fs-image="img/a.jpg"></a>

For more details, please refer to the source code of this demo in the download package.

Use images of different file sizes for different devices

Another similar feature: If you want different devices to load images of different file sizes, you can include multiple versions of each slide image. For example:

<li>
    <a class="ns-img" href="img/1.jpg" data-screen="450-max"></a>
    <a class="ns-img" href="img/1-small.jpg" data-screen="0-449"></a>
</li>

When the device screen width is less than 450 pixels, the slider will load 1-small.jpg instead.

Note: This feature can only be tested on real devices, as the size specified here refers to the device width, not the browser window size.