Interactive List Scroller In jQuery - Scrolloop

Scrolloop is an interactive, infinite-looping scroller jQuery plugin that applies a motion hover effect to a list of HTML elements just like a carousel.

The direction and speed of horizontal scrolling depends on the position of the mouse when you hover over the scroller.

How to use it:

1. Create an HTML unordered list for the scroller.

<ul id="image-list">
  <li><img src="1.png" /></li>
  <li><img src="2.png" /></li>
  <li><img src="3.png" /></li>
  <li><img src="4.png" /></li>
  <li><img src="5.png" /></li>
  ...
</ul>

2. The list needs to have a fixed width:

#image-list {
  width: 300px;
  /* additional styles here */
}

3. Load both jQuery library and the jScrolloop plugin at the end of the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.scrolloop.min.js"></script>

4. Hide the image list so it won't look awkward when it resizes as the images load.

$(function () {
  $("#image-list").hide();
});

5. Initialize the Scrolloop plugin and define the scrolling speed.

$(window).load(function () {
  // 10 is the scrolling speed
  $("#image-list").scrolloop(10).
  // show the image list after we're all set
  slideDown(500);
});

---

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