This time I will share jQuery Plugin and tutorial about CSS Scroll Snap Points Based jQuery Carousel Plugin – Snapper, hope it will help you in programming stack.
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.
1 |
<script src="/path/to/jquery.js"></script> |
2 |
<script src="/path/to/overthrow-toss.js"></script> |
2. Download and load the jQuery Snapper’s JavaScript & CSS files as follows:
1 |
<link rel="stylesheet" href="snapper.css"> |
2 |
<script src="snapper.js"></script> |
3. The basic markup structure to create an image carousel with navigation thumbnails.
02 |
<div class="snapper_pane_crop"> |
03 |
<div class="snapper_pane"> |
04 |
<div class="snapper_items"> |
05 |
<div class="snapper_item" id="img-a2"> |
06 |
<img src="1.jpg" alt=""> |
08 |
<div class="snapper_item" id="img-b2"> |
09 |
<img src="2.jpg" alt=""> |
11 |
<div class="snapper_item" id="img-c2"> |
12 |
<img src="3.jpg" alt=""> |
17 |
<div class="snapper_nav"> |
18 |
<a href="#img-a2"><img src="1-thmb.jpg" alt=""></a> |
19 |
<a href="#img-b2"><img src="2-thmb.jpg" alt=""></a> |
20 |
<a href="#img-c2"><img src="3-thmb.jpg" alt=""></a> |
4. Initialize the Snapper and done.
2 |
$( 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.
1 |
<div class="snapper" data-snapper-nextprev> |
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)
v3.3.0 (2019-08-19)
This awesome jQuery plugin is developed by filamentgroup. For more Advanced Usages, please check the demo page or visit the official website.
