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="//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.