Mobile Compatible Content Scroller Plugin With jQuery - touchFlow

Mobile Compatible Content Scroller Plugin With jQuery - touchFlow

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,
  // callbacks
  initComplete : null,
  stopped : null,
  resizeend : nul

6. API methods.

// scroll to a specified element
// scroll to a specified position

Change log:


  • v1.5.1


  • added mouse wheel support.


  • improvements.


  • Fixed touchend and mouse drag issues.


  • Fix mouse drag error in Chrome


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