
touchFlow is a simple, touch-enabled jQuery scroller plugin which allows you to scroll/swipe/drag through a series of html contents in both directions.
More features:
- Custom animation speed.
- Smooth momentum scrolling effect.
- Supports any html elements like images, text, DIVs, etc.
- Allows to auto snap element to the edge of the container.
Basic usage:
1. Load the needed jQuery library and jQuery touchFlow plugin in the webpage.
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="jquery.touchFlow.js"></script>
2. Load the jquery.event.drag.js plugin for adding complex drag interactions to your elements.
<script src="jquery.event.drag-1.5.1.min.js"></script>
3. Add a list of html content into the scroller.
<div id="touchFlow" class="demo"> <ul> <li>contents 1</li> <li>contents 2</li> <li>contents 3</li> <li>contents 4</li> <li>contents 5</li> ... </ul> </div>
4. Calling the plugin will turn the html list into a horizontal scroller.
$("#touchFlow").touchFlow();
5. Customize the scroller.
$("#touchFlow").touchFlow({ // scroll direaction // 'x': horizontal // 'y': vertical axis : "x", // Number or String. // Initial item page : 0, // animation speed speed : 200, // snap to the edge of the container snap : false, // callbacks initComplete : null, stopped : null, resizeend : nul });
6. API methods.
// scroll to a specified element $("#touchFlow").data("touchFlow").go_page(2); // scroll to a specified position $("#touchFlow").data("touchFlow").posX("first"); $("#touchFlow").data("touchFlow").posX("last"); $("#touchFlow").data("touchFlow").posX(-230); $("#touchFlow").data("touchFlow").posY("first"); $("#touchFlow").data("touchFlow").posY("last"); $("#touchFlow").data("touchFlow").posY(-230);
Change log:
2018-02-21
- v1.5.1
2017-04-21
- added mouse wheel support.
2017-02-01
- improvements.
2016-12-28
- Fixed touchend and mouse drag issues.
2016-12-16
- Fix mouse drag error in Chrome
2016-08-29
This awesome jQuery plugin is developed by dohoons. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 21.02.2018
- Source