simplyScroll v2

a flexible jQuery content scroller with touch support

Jump to: [Features] [Examples] [Download] [Installation] [Config]

This plugin is now legacy and is mostly unsupported!
Core functionality still works, but all features described may not work as intended or at all, please use at your own risk!

simplyScroll is a scroll-tastic jQuery plugin that can animate (scroll) content either automatically or manually, horizontally or vertically, backwards or forwards.

New Features in v2

Features

Examples

  1. Horizontal scroll with loop (infinite effect)
  2. As above but manual scroll with buttons
  3. Manual Vertical scroll, with buttons, looped
  4. Custom HTML example, scrolling backwards
  5. RTL mode
  6. Pause and resume

Download

simplyScroll is open source and licensed under a MIT license. Latest version simplyScroll 2.1.1 released 16/07/18

jquery.simplyscroll.zip53 KbComplete package including CSS & buttons.png
jquery.simplyscroll.js13 KbSource
jquery.simplyscroll.min.js8 Kbminified (uncompressed)

NPM Installation

yarn add jquery-simplyscroll or npm install jquery-simplyscroll --save

Basic usage (CommonJS)

var $ = require('jquery');
require('jquery-simplyscroll');

$("#scroller").simplyScroll({
  speed: 1
});

Configuration

simplyScroll can be configured with a number of options

PropertyDefaultDescription
customClass'simply-scroll'Class name for styling
frameRate24Number of movements/frames per second
speed1Number of pixels moved per frame, in 'loop' mode must be divisible by total width of scroller
orientation'horizontal''horizontal or 'vertical' - not to be confused with device orientation
direction'forwards''forwards' or 'backwards'
autotrueAutomatic scrolling, use false for button controls
autoMode'loop'auto = true, 'loop' or 'bounce', (disables buttons)
manualMode'end'auto = false, 'loop' or 'end' (end-to-end)
pauseOnHovertruePause scroll on hover (auto only)
pauseOnTouchtrueTouch enabled devices only (auto only)
pauseButtonfalseCreates a pause button (auto only)
startOnLoadfalseInit plugin on window.load (to allow for image loading etc)
initialOffset0Start with an initial pixel offset

Comments / Feedback

Notes/issues:

simplyScroll jumping? Make sure you specify images sizes or initiate the plugin on window load i.e. use startOnLoad option or $(window).on('load', ...)

Feel free to contact me @logicbox or will@logicbox.net, however due to work commitments I cannot guarantee a response.

Fork me on GitHub