This time I will share jQuery Plugin and tutorial about Mobile-friendly Carousel/Slideshow With Lazy Loading – Square1 Slider, hope it will help you in programming stack.
A simple, customizable, responsive, and mobile-friendly image slider/carousel/slideshow plugin with support of responsive image delivery and image lazy loading for better performance.
More Features:
- Auto switches between images at a specified speed.
- Allows you to place any element on the image.
- Smooth Slide or Crossfading transitions.
- Auto resizes images to fit the container.
- Supports keyboard interactions and touch swipe events.
- Dark & Light themes.
- Displays image captions at the bottom of the slider/slideshow.
How to use it:
1. To get started, include the Square1 Slider plugin’s files in the document.
1 |
<link rel="stylesheet" href="/path/to/square1.min.css" /> |
2 |
<script src="/path/to/cdn/jquery.min.js"></script> |
3 |
<script src="/path/to/square1.min.js"></script> |
2. Insert images to the Square1 Slider container.
2 |
<img src="1.jpg" alt="Caption 1" /> |
3 |
<img src="2.jpg" alt="Caption 2" /> |
4 |
<img src="3.jpg" alt="Caption 3" /> |
3. To delay the loading of images, just place the image path in the data-src attribute:
2 |
<img data-src="1.jpg" alt="Caption 1" /> |
3 |
<img data-src="2.jpg" alt="Caption 2" /> |
4 |
<img data-src="3.jpg" alt="Caption 3" /> |
4. It also supports responsive image delivery:
03 |
srcset="1-sm.jpg 400w, 1-md.jpg 800w, 1.jpg 1200w" |
04 |
sizes="(max-width: 500px) 400px, (max-width: 1200px) 800px, 1200px" |
06 |
<img src="2.jpg" alt="Caption 2" /> |
07 |
<img src="3.jpg" alt="Caption 3" /> |
14 |
data-srcset="1-sm.jpg 400w, 1-md.jpg 800w, 1.jpg 1200w" |
16 |
<img src="2.jpg" alt="Caption 2" /> |
17 |
<img src="3.jpg" alt="Caption 3" /> |
5. Set the max width of the Square1 Slider.
6. Initialize the Square1 Slider plugin and done.
1 |
$('.example').square1({ |
7. Determine how to resize (stretch & crop) images to fit the container.
1 |
$('.example').square1({ |
7 |
scale_from: 'center center' |
8. Enable image lazy loading. Default: false.
1 |
$('.example').square1({ |
9. Config the transition effect.
01 |
$('.example').square1({ |
10. Enable/disable keyboard interactions and touch gestures. Default: true.
1 |
$('.example').square1({ |
11. Customize the autoplay behavior.
1 |
$('.example').square1({ |
12. Change the theme to ‘Light’.
1 |
$('.example').square1({ |
13. Determine the position of the navigation controls & pagination bullets.
1 |
$('.example').square1({ |
4 |
prev_next_nav: 'inside', |
14. More configuration options.
