Author: | jabes |
---|---|
Views Total: | 277 views |
Official Page: | Go to website |
Last Update: | June 1, 2023 |
License: | MIT |
Preview:

Description:
Snap Touch is a responsive, touch-enabled carousel library that delivers smooth-scrolling performance and snap-to-element features to enhance the user experience.
How to use it:
1. Import the Snap Touch’s script into the document.
<script src="snap-touch.js"></script>
2. Add your own slides to the carousel.
<div id="slider" class="slider"> <div class="slides"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> <div class="slide"> Slide 3 </div> ... </div> </div>
3. Initialize the Snap Touch carousel.
const mySlider = new SnapTouch('slider').create();
4. Apply CSS styles to the carousel.
.slider { overflow: hidden; padding-left: 50%; padding-right: 50%; } .slides { margin-left: -100px; margin-right: -100px; white-space: nowrap; font-size: 0; } .slide { display: inline-block; /* more styles here */ }
5. API methods.
mySlider.create() mySlider.destroy() mySlider.getActiveIndex() mySlider.setActiveIndex(index) mySlider.getGosition() mySlider.setPosition(posX)
6. Events.
mySlider.addEventListener( 'SnapTouch.created', function (event) { // do something } ); mySlider.addEventListener( 'SnapTouch.destroyed', function (event) { // do something } ); mySlider.addEventListener( 'SnapTouch.activeIndexChanged', function (index) { // do something } ); mySlider.addEventListener( 'SnapTouch.trackingStart', function (event) { // do something } ); mySlider.addEventListener( 'SnapTouch.trackingEnd', function (event) { // do something } ); mySlider.addEventListener( 'SnapTouch.tracking', function (now, timeElapsed, delta, velocity, posX, lastPosX, lastTimestamp) { // do something } ); mySlider.addEventListener( 'SnapTouch.positionChanged', function (posX) { // do something } ); mySlider.addEventListener( 'SnapTouch.easePositionEnd', function (posX) { // do something } ); mySlider.addEventListener( 'SnapTouch.resized', function (slideWidth, slideTotal) { // do something } );