Basic Infinite Scroller Plugin For jQuery - seamlessRolling

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.

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
});

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

  • Publication date: 21.12.2017
  • Source