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="//code.jquery.com/jquery.min.js"></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">
  <ul>
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>
    ...
  </ul>
</div>

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

$("#example").infiniteScroller();

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

$("#example").infiniteScroller({
  scrollOnMouseOver: false
});

5. Set the scroll direction.

$("#example").infiniteScroller({
  direction: "left" // or "right"
});

6. Set the animation speed.

$("#example").infiniteScroller({
  maxSpeed: 20,
  speed: 1
});

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

$("#example").infiniteScroller({
  resetOnMouseOut: true
});

Change log:

2017-04-07

• Maintain original direction on mouse out

2017-04-06

• JS update

---

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