SnapSlider

View the code, fork the repository or file an issue on GitHub.


SnapSlider enhances a scrolling gallery of images, videos or other content with the ability to snap to the nearest element boundary. SnapSlider also allows for paging, page lists and zooming.

Examples below: Basic Example, Existing Links and Multiple Sources

Basic Snapslider

This is a basic use of SnapSlider on a gallery of 9 items.

Multiple Source SnapSlider

This example shows how SnapSlider can use three sets of images per element – normal, large and largest – to allow for a ‘lazy-loading’ style of loading images. Currently this only works if you're using background images for your SnapSlider element and should be considered a ‘beta’ feature.

You’ll need to add three strings to your SnapSlider element using the data attributes data-ss-bg-normal, data-ss-bg-large and data-ss-bg-largest. These patterns are used to replace parts of the filename. In the example shown, I’ve used .jpg, -large.jpg and -largest.jpg respectively (which works when all your files are called img1.jpg, img1-large.jpg and img1-largest.jpg) but you can use folder names, prefixes or other methods if you prefer.

Finally, you’ll need to add the data attribute data-snapslider-bg to the element you set your background image on.

The example HTML and the CSS required can be found in the gh-pages branch on GitHub.


SnapSlider is made available to you under the MIT License.

Copyright © 2014 Anthony Williams. All rights reserved.