Basic Infinite Scroller Plugin For jQuery - seamlessRolling

seamlessRolling is a dead simple jQuery scroller plugin which infinitely scrolls through an unordered html list with support for pause on cursor hover.

How to use it:

1. Insert your html list into a container element as these:

<div class="scroll-list">
  <ul>
      <li>
          List Item 1
      </li>
      <li>
          List Item 2
      </li>
      <li>
          List Item 3
      </li>
      <li>
          List Item 4
      </li>
      <li>
          List Item 5
      </li>
      <li>
          List Item 6
      </li>
  </ul>
</div>

2. Insert both jQuery JavaScript library and the seamlessRolling.min.js script at the bottom of the web page.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" 
        crossorigin="anonymous">
</script>
<script src="seamlessRolling.min.js"></script>

3. Initialize the plugin and done.

$.seamlessRolling();

4. Override the default scrolling speed.

$.seamlessRolling({
  speed: 10
});

5. Set the height of list items.

$.seamlessRolling({
  liHeight: 30
});

6. Set the scrolling direction.

$.seamlessRolling({

  // 1 = top to bottom
  // 2 = right to left
  // 3 = left to right
  direction: 0 
  
});

7. Enable/disable pause on hover.

$.seamlessRolling({
  hoverStop: true
});

Change log:

2018-01-29

• Supports horizontal scrolling.

2018-01-26

• Added top to bottom direction.

---

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