CSS Scroll Snap Points Based jQuery Carousel Plugin - Snapper

Snapper is a jQuery based CSS Scroll Snap Points helper and polyfill which can be used to create a customizable slider / carousel with smooth, high performance scrolling experiences.

Basic usage:

1. Load the needed jQuery library and fg-overthrow (An overflow:auto polyfill for responsive design) in your html file.

<script src="/path/to/jquery.js"></script>
<script src="/path/to/overthrow-toss.js"></script>

2. Download and load the jQuery Snapper's JavaScript & CSS files as follows:

<link rel="stylesheet" href="snapper.css">
<script src="snapper.js"></script>

3. The basic markup structure to create an image carousel with navigation thumbnails.

<div class="snapper">
  <div class="snapper_pane_crop">
    <div class="snapper_pane">
      <div class="snapper_items">
        <div class="snapper_item" id="img-a2">
          <img src="1.jpg" alt="">
        </div>
        <div class="snapper_item" id="img-b2">
          <img src="2.jpg" alt="">
        </div>
        <div class="snapper_item" id="img-c2">
          <img src="3.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="snapper_nav">
    <a href="#img-a2"><img src="1-thmb.jpg" alt=""></a>
    <a href="#img-b2"><img src="2-thmb.jpg" alt=""></a>
    <a href="#img-c2"><img src="3-thmb.jpg" alt=""></a>
  </div>
</div>

4. Initialize the Snapper and done.

$(function(){
  $( document ).trigger( "enhance" );
});

5. Adding the data-snapper-nextprev attribute to the top container will generate next / prev links and pagination dots for the carousel.

<div class="snapper" data-snapper-nextprev>
  ...
</div>

6. Download the zip and check out the doc folder for more examples.

Changelog:

v4.0.0-2 (2020-04-24)

• retain active slide after resize

v3.3.0 (2019-08-19)

• Update

v3.3.0 (2019-08-19)

• Update

---

This awesome jQuery plugin is developed by filamentgroup. For more Advanced Usages, please check the demo page or visit the official website.