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

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-27

• Adjusted auto-height settings to be proportional to first image aspect ratio

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.