Mobile Compatible Content Scroller Plugin With jQuery - touchFlow

Mobile Compatible Content Scroller Plugin With jQuery - touchFlow
File Size: 9.87 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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="//"></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">
    <li>contents 1</li>
    <li>contents 2</li>
    <li>contents 3</li>
    <li>contents 4</li>
    <li>contents 5</li>

4. Calling the plugin will turn the html list into a horizontal scroller.


5. Customize the scroller.


  // 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,

  // whether to use mouse
  useMouse: true,

  // callbacks
  initComplete : null,
  stopped : null,
  resizeend : nul

6. API methods.

// scroll to a specified element

// scroll to a specified position


Change log:


  • Added 'useMouse' option.


  • added mouse wheel support.


  • improvements.


  • Fixed touchend and mouse drag issues.


  • Fix mouse drag error in Chrome


  • v1.4

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