Minimal Data List Scroller Plugin - jQuery simplyScroll
File Size: | 53.9 KB |
---|---|
Views Total: | 1417 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.