Demo of Snapper.js A CSS Snap Points Helper and Polyfill

Basic Snapper example

A snapper carousel with some thumbnail links. By default, item widths are calculated evenly based on the number of total items, so that one item fills 100% of the scroll pane at a time, and the scroller snaps to each item.

Thumbnails are just regular links to a slide's ID attribute. The scrollbar is cropped from sight using the optional snapper_pane_crop div (only recommended when thumbnails or next/prev navigation is in play).

Auto-play Snapper example

By setting the data-snapper-autoplay attribute on the class="snapper" element to a natural number value snapper will automatically rotate through the images. The value represents a the millisecond delay between item transitions. In the example below we have data-snapper-autoplay="2000"

Disable deep linking example

By setting the data-snapper-deeplinking="false" attribute on the class="snapper" element, we can disable location hash changes when slides change.