Skip to content
This repository

A touch-enabled, hardware-accelerated, slider.

branch: master
README.md

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 mckinney.com.

It's Electric!

Requires: jQuery

Installation

Put this in your <head>:

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="/path/to/js/lectric.js" type="text/javascript"></script>

Usage

HTML:

<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>
</div>

JavaScript:

var slider = new Lectric();
slider.init('#slider');

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);
});
slider.off('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.