Mouse-aware Element Scroller Plugin With jQuery - Infinite Scroller

File Size: 14.2 KB
Views Total: 3611
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Mouse-aware Element Scroller Plugin With jQuery - Infinite Scroller

An infinite, mouse-aware jQuery scroller plugin which has the ability to automatically scroll a list of position: absolute html elements left or right depending on the mouse position.

How to use it:

1. Include the stylesheet infinite-scroller.css in the header, and the JavaScript infinite-scroller.js after jQuery library but before the closing body tag.

<script src="//"></script>
<script src="infinite-scroller.js"></script>
<link href="infinite-scroller.css" rel="stylesheet">

2. Create an html list for the infinite scroller.

<div id="example">
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>

3. Initialize the plugin to create a default scroller that will auto scroll on mouse hover.


4. Enable the auto scroll on page load instead of mouse hover.

  scrollOnMouseOver: false

5. Set the scroll direction.

  direction: "left" // or "right"

6. Set the animation speed.

  maxSpeed: 20,
  speed: 1

7. If you'd like to reset the animation speed on mouse out:

  resetOnMouseOut: true

Change log:


  • Maintain original direction on mouse out


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