Square1 jQuery Slider

Download and check out the documentation on GitHub.

Examples

Basic Slider
Slider Options & Formatting
Slider w/ HTML Elements
Image Sizing & Positioning
Events
Responsive Images
Sequential and Lazy Loading


Basic Slider

Fork me on GitHub

One thing that sets Square1 apart from other sliders is the ability to either have the images fill the space or be resized so that the entirety of the image is shown without cropping. The fill_mode property will let you control how and how much of your images people see.

The default value is "cover", which resizes and crops images to fill the slideshow fully.

To create a slideshow, simply create a container element filled with images in your HTML:

<div class="slideshow"> <img src="image1.png" alt="Caption 1"> <img src="image2.png" alt="Caption 2"> <img src="image3.png" alt="Caption 3"> </div>

... And convert it to a sqaure1 slider by calling the square1() function in your javascript:

$('.slideshow').square1();
Duckpool Beach, Cornwall. Image from http://isorepublic.com/ Napoli Coastline. Image from http://isorepublic.com/ Portland Rock. Image from http://isorepublic.com/

Slider Options & Formatting

You can easily control the size of the slideshow and the position/visibility of the UI.

$('.slideshow_formatting').square1({ width: '200px', height: '200px', prev_next_nav: 'outside', dots_nav: 'outside', caption: 'none' });
Duckpool Beach, Cornwall. Image from http://isorepublic.com/ Napoli Coastline. Image from http://isorepublic.com/ Portland Rock. Image from http://isorepublic.com/

Transitions can either be set to a cross-fade (default) or a 'slide' animation like this one here:

$('.slideshow_slide').square1({ animation: 'slide' });
Duckpool Beach, Cornwall. Image from http://isorepublic.com/ Napoli Coastline. Image from http://isorepublic.com/ Portland Rock. Image from http://isorepublic.com/

Square1 also comes with a 'light' theme for use on darker images and sites

$('.slideshow_light').square1({ theme: 'light' });
Duckpool Beach, Cornwall. Image from http://isorepublic.com/ Napoli Coastline. Image from http://isorepublic.com/ Portland Rock. Image from http://isorepublic.com/

Slider w/ HTML Elements

You can also make slides out of more complex HTML structures. Square1 will use the first `img` tag in each child element as the background of that slide.

<div class="slideshow"> <div> <img src="image1.png" alt="Caption 1"> <h3>Slide Title</h3> </div> <div> <img src="image2.png" alt="Caption 2"> <h3>Slide Title</h3> </div> <div> <img src="image3.png" alt="Caption 3"> <h3>Slide Title</h3> </div> </div>
Duckpool Beach, Cornwall. Image from http://isorepublic.com/

Aenean pellentesque diam

Lorem ipsum dolor sit amet consectetur, adipisicing elit...
Napoli Coastline. Image from http://isorepublic.com/

Suspendisse ac nisl

Cupiditate hic ratione perferendis quas fuga, deserunt at optio...
Portland Rock. Image from http://isorepublic.com/

In dapibus magna sit amet mauris

Magnam recusandae animi...

Image Sizing and Positioning

By default, square1 will size and crop images so that they "cover" the entire slider area. Using the "contain" fill mode will resize each image so that it fits completely inside the slideshow.

$('.slideshow_contain').square1({ fill_mode: 'contain' });
Duckpool Beach, Cornwall. Image from http://isorepublic.com/ Napoli Coastline. Image from http://isorepublic.com/ Portland Rock. Image from http://isorepublic.com/

Additionally, if you are using the default "cover" fill mode to scale your images, you can set the point from which the image should scale from. You can use any values that work with the CSS [background-position](https://www.w3schools.com/cssref/pr_background-position.asp) property.

$('.slideshow_scalefrom').square1({ scale_from: 'bottom right' });

And you can set this on an image-by-image basis by adding the 'scale-from' attribute to your images (resize your browser to see the result):

<div class="slideshow_scalefrom"> <img src="image1.png" alt="Caption 1" scale-from="center center"> <img src="image2.png" alt="Caption 2" scale-from="top right"> <img src="image3.png" alt="Caption 3"> </div>
Duckpool Beach, Cornwall. Image from http://isorepublic.com/ Napoli Coastline. Image from http://isorepublic.com/ Portland Rock. Image from http://isorepublic.com/

Events

With built in events and callbacks, you can also control and respond to events in the slideshow however you want.

$('.slideshow_events').square1({ auto_start: false, onPlay: function() { $('.status').html('Playing');}, onStop: function() { $('.status').html('Stopped');}, onChange: function() { $('.status').html('Changing slides');}, }); // BUTTONS $('.play').click(function() { $('.slideshow_events').square1('play'); }); $('.stop').click(function() { $('.slideshow_events').square1('stop'); }); $('.next_slide').click(function() { $('.slideshow_events').square1('next'); }); // Jump to Slide 3 $('.slide3').click(function() { $('.slideshow_events').square1(3); });
Duckpool Beach, Cornwall. Image from http://isorepublic.com/ Napoli Coastline. Image from http://isorepublic.com/ Portland Rock. Image from http://isorepublic.com/
Stopped

Responsive Images

Square1 supports srcset right out of the box. Just create your various image sizes, add 'srcset' (and the optional 'size') attributes to your img tags and square1 will load the appropriately sized images as needed.

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

Sequential and Lazy Loading

Square1 will try to automatically stagger the downloading of images to make pages load faster and start playing sooner. To prevent the browser from trying to fetch images too early, add 'data-' before any 'src' and 'srcset' attributes on any images you want delayed. Square1 will convert the attributes at the appropriate time.

<div class="slideshow"> <img src="image1.png" srcset="image1-sm.jpg 400w" alt="Caption 1"> <img data-src="image2.png" data-srcset="image2-sm.jpg 400w" alt="Caption 2"> <img data-src="image3.png" data-srcset="image3-sm.jpg 400w" alt="Caption 3"> </div>

In cases where there are a lot of big images or complex animations, you might want to delay image loading even more. You can tell square1 to load each image only when it's needed ("lazy loading") by setting the 'lazy_load' option to true.

$('.slideshow_srcset').square1({ lazy_load: true });

Note: Make sure to add the 'data-' prefix to the 'src' and 'srcset' attributes as mentioned above.