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
This is a basic use of SnapSlider on a gallery of 9 items.
This example shows how SnapSlider can be used with existing markup. In this particular case, SnapSlider can also enhance an existing list of links as a secondary page list. This is achieved by specifying a selector for the links. The selector must return the same number of items as there are pages in the slider, or SnapSlider will not use the list.
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.