Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A touch-enabled, hardware-accelerated, slider.
JavaScript Ruby
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
examples when frames are smaller than the target, don't leave white space on t…
js Merge pull request #14 from MajorLeagueBaseball/variable-width-frames

Lectric Slider

Lectric is a JavaScript slider that is touch-enabled and takes advantage of hardware acceleration. It looks awesome on Apple touch devices. You can see an early version of this software implemented on

It's Electric!

Requires: jQuery


Put this in your <head>:

<link href="/path/to/css/lectric.css" rel="stylesheet" type="text/css" media="screen">

<script src="" type="text/javascript"></script>
<script src="/path/to/js/lectric.js" type="text/javascript"></script>



<div id="slider">
  <div class="item">Page 1</div>
  <div class="item">Page 2</div>
  <div class="item">Page 3</div>
  <div class="item">Page 4</div>


var slider = new Lectric();

Optional Parameters

You can specify a few extra parameters when you call the init method. Those include:

  • next (selector): Next button
  • previous (selector): Previous button
  • limitLeft (boolean): Prohibits the slider from moving left
  • limitRight (boolean): Prohibits the slider from moving right
  • itemClassName (string): Class name of the individual pages of the slider (defaults to "item")
  • itemWrapperClassName (string): Class name of the container that wraps all items (defaults to "items")
  • animateEasing (string): A string indicating which easing function to use for the transition (non-mobile only).
  • animateDuration (integer or string): A string (e.g. "fast" or "slow") or number (in milliseconds) determining how long a slide animation will run.
  • hooks (map): Map of callback functions that should be subscribed to the various hooks (see next section for more about hooks)
  • tossing (boolean): Turns tossing of the slider on. This lets you "toss" the slider ahead more than one page. (defaults to false)
  • tossFunction (function): A function to use for calculating the distance (from the touchend point) the slider should be tossed.

For example, let's provide a slider with next/previous buttons:

var slider = new Lectric();
slider.init('#slider', {next: '.next', previous: '.previous'});

Hook System

Lectric is designed to give you a great deal of visibility of its insides. To help you extend Lectric, we've provided a simple hook system for you to tap into. Hooks have specific names and are invoked at specific times in the execution of the slider's timeline.

Subscribing to a hook looks something like this:

slider.on('slide', function(s, event) {
  console.log('We just moved! Our current position is:' + s.position.x);

Unsubscribing from a hook looks like this:

var handler = slider.on('slide', function(s, event) {
  console.log('We just moved! Our current position is:' + s.position.x);
});'slide', handler); // Unsubscribe handler from slider

The hooks available to you are:

  • init: Triggered after the slider is initialized
  • start: Triggered when the user puts her finger down on the slider
  • slide: Triggered when the position of the slider is moved
  • firstSlide: Triggered the first time the position of the slider is moved (for a single touch event)
  • end: Triggered when the user lifts her finger off of the slider
  • endNoSlide: Triggered when the user lifts her finger off of the slider and did not move the slider
  • animationEnd: Triggered when the slide animation has completed
  • nextButton: Triggered when the next button is pressed
  • previousButton: Triggered when the previous button is pressed

The callback function that you provide the on function will pass your callback two parameters: slider controller instance you are manipulating and the jQuery event object that was triggered. Having a reference to the controller object will allow you to augment the behaviour of the slider itself.

Something went wrong with that request. Please try again.