Mobile-friendly Carousel/Slideshow With Lazy Loading - Square1 Slider

Mobile-friendly Carousel/Slideshow With Lazy Loading - Square1 Slider
File Size: 15.4 KB
Views Total: 2628
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

<link rel="stylesheet" href="/path/to/square1.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/square1.min.js"></script>

2. Insert images to the Square1 Slider container.

<div class="example">
  <img src="1.jpg" alt="Caption 1" />
  <img src="2.jpg" alt="Caption 2" />
  <img src="3.jpg" alt="Caption 3" />
  ...
</div>

3. To delay the loading of images, just place the image path in the data-src attribute:

<div class="example">
  <img data-src="1.jpg" alt="Caption 1" />
  <img data-src="2.jpg" alt="Caption 2" />
  <img data-src="3.jpg" alt="Caption 3" />
  ...
</div>

4. It also supports responsive image delivery:

<div class="example">
  <img src="1.jpg"
       srcset="1-sm.jpg 400w, 1-md.jpg 800w, 1.jpg 1200w"
       sizes="(max-width: 500px) 400px, (max-width: 1200px) 800px, 1200px"
       alt="Caption 1">
  <img src="2.jpg" alt="Caption 2" />
  <img src="3.jpg" alt="Caption 3" />
  ...
</div>

<!-- OR -->
<div class="example">
  <img data-src="1.jpg"
       data-srcset="1-sm.jpg 400w, 1-md.jpg 800w, 1.jpg 1200w"
       alt="Caption 1">
  <img src="2.jpg" alt="Caption 2" />
  <img src="3.jpg" alt="Caption 3" />
  ...
</div>

5. Set the max width of the Square1 Slider.

.example {
  max-width: 600px;
  height: 450px;
}

6. Initialize the Square1 Slider plugin and done.

$('.example').square1({
  // options here
});

7. Determine how to resize (stretch & crop) images to fit the container.

$('.example').square1({

  // or 'contain'
  fill_mode: 'cover',

  // CSS background-position property
  scale_from: 'center center'
  
});

8. Enable image lazy loading. Default: false.

$('.example').square1({

  lazy_load: true
  
});

9. Config the transition effect.

$('.example').square1({

  // use slide transition
  animation: 'slide'

  // in milliseconds
  slide_duration: 4000,
  transition_time: 500

});

10. Enable/disable keyboard interactions and touch gestures. Default: true.

$('.example').square1({

  keyboard: true,
  gestures: true

});

11. Customize the autoplay behavior.

$('.example').square1({

  auto_start: true,
  start_delay: 0,
  pause_on_hover: false

});

12. Change the theme to 'Light'.

$('.example').square1({

  theme: 'light'

});

13. Determine the position of the navigation controls & pagination bullets.

$('.example').square1({

  // 'inside', 'outside', 'hover', 'none'
  prev_next_nav: 'inside',
  dots_nav: 'inside',
  caption: 'outside'
  
});

14. More configuration options.

$('.example').square1({

  width:'', 
  height: '',
  background: 'none'

});

15. Callback functions.

$('.example').square1({

  onLoad: function() {},
  onPlay: function() {},
  onStop: function() {},
  onChange: function() {}

});

16. Available methods to control the Square1 Slider programmatically

// play
$('.example').square1('play');

// stop
$('.example').square1('stop');

// goto the next slide
$('.example').square1('next');

// goto a specific slide
$('.example').square1(2);

Changelog:

2020-10-06

  • Fixed bug where error was thrown if square1 was called on an element that doesn't exist

This awesome jQuery plugin is developed by thomhines. For more Advanced Usages, please check the demo page or visit the official website.