Touch-enabled Scroller With Snapping Support – snapscroll.js

Preview:

Description:

The snapscroll.js library lets you create a touch-enabled horizontal scroller that automatically snaps the current slide to its container after dragging or swiping.

How to use it:

Add slides to the scroller as these:

<div class="viewport">
  <div class="holder">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    ...
  </div>
</div>

Import the minified version of the snapscroll.js into the document.

<script src="snapscroll.min.js"></script>

Create a new SnapScroll instance and initialize the scroller.

var _snapscroll = new SnapScroll();
var viewports = document.querySelectorAll('.viewport');
_snapscroll.init(viewports)

Customize the scroller by passing the following options object to the SnapScroll.

var _snapscroll = new SnapScroll({
    duration: 350,
    easing: 'ease',
    holderClass: 'holder',
    itemClass: 'item',
    refreshResize: true,
    refreshTimeout: 0,
    limitScroll: false
});