A Simple and Easy Image Carousel Slider Plugin With Lazy Loading

A very simple image slider that works responsive to images of any size or shape. This plugin is a customizable, mobile-friendly slideshow with support for responsive image delivery and slow image uploading for better performance.

Key Features:

Automatic switching between photos at a specified speed.
It allows you to place any element on the image.
Smooth sliding or crossed shifts.
Automatically resizes pictures to fit the container.
Supports keyboard interactions and swipe-to-touch events.
Dark and light themes.
It displays photo captions at the bottom of the slider/slideshow.

How to make use of it:

1. To get began, include the Square1 Slider plugin’s information within the doc.

<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 photos to the Square1 Slider container.

<div class="example">
  // Add Images Here
  ...
</div>

3. To delay the loading of photos, simply place the picture path within the data-src attribute:

<div class="example">
  // Add Images Here
  ...
</div>

4. It additionally helps responsive picture delivery:

<div class="example">
  // Add Images Here
  ...
</div>
<!-- OR -->
<div class="example">
  // Add Images Here
  ...
</div>

5. Set the max-width of the Square1 Slider.

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

6. Initialize the Square1 Slider plugin and accomplished it.

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

7. Determine how one can resize (stretch & crop) photos to suit the container.

$('.example').square1({
  // or 'contain'
  fill_mode: 'cover',
  // CSS background-position property
  scale_from: 'center center'
});

8. Enable picture lazy loading.

$('.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.

$('.example').square1({
  keyboard: true,
  gestures: true
});

11. Customize autoplay conduct.

$('.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 features.

$('.example').square1({
  onLoad: function() {},
  onPlay: function() {},
  onStop: function() {},
  onChange: function() {}
});

16. Available strategies to manage 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);

Mobile-friendly Carousel/Slideshow With Lazy Loading, Square1 Plugin/Github