Minimal Data List Scroller Plugin - jQuery simplyScroll

simplyScroll is a minimal yet highly customizable jQuery scroller plugin used for infinitely scrolling through a list of any web content in a fixed height container.

Features:

• Supports both horizontal and vertical scrolling.
• Autoplay with pause on hover support.
• Custom controls.
• Custom frame rate for performance.
• Infinite scrolling.
• Mobile & touch friendly.

How to use it:

1. Install & Download with package managers.

# Yarn
$ yarn add jquery-simplyscroll

# NPM
$ npm install jquery-simplyscroll --save

2. Load the jQuery simplyScroll plugin's files into your web page.

<link rel="stylesheet" href="jquery.simplyscroll.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery.simplyscroll.js"></script>

3. Create a list of web content for the scroller.

<ul id="scroller">
  <li>
    <img src="1.jpg" alt="alt 1">
  </li>
  <li>
    <img src="2.jpg" alt="alt 2">
  </li>
  <li>
    <img src="3.jpg" alt="alt 3">
  </li>
  ...
</ul>

4. Activate the scroller by calling the function on the list.

$(function() {
  $("#scroller").simplyScroll();
});

5. All default options to customize the scroller.

$("#scroller").simplyScroll({

  // default class
  customClass: 'simply-scroll',

  // No of movements per second
  frameRate: 24, 

  // Intended no. of pixels per frame (/w scroller size & requestAnimationFrame this may not be honoured)
  speed: 1, 

  // 'horizontal or 'vertical' - not to be confused with device orientation
  orientation: 'horizontal', 

  // autoplay
  auto: true,

  // if auto == true, use 'loop' or 'bounce',
  autoMode: 'loop', 

  // if auto == false, use 'loop' or 'end'
  manualMode: 'end',

  // 'forwards' or 'backwards'.
  direction: 'forwards', 

  // if autoMode == loop || bounce only
  pauseOnHover: true, 

  // touch device only
  pauseOnTouch: true, 

  // generates an extra element to allow manual pausing
  pauseButton: false, 

  // use this to delay starting of plugin until all page assets have loaded
  startOnLoad: false, 

  // initial offset in pixels
  initialOffset: 0
  
});

---

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