Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A touch-enabled, hardware-accelerated, slider.
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
examples
js
tests
.gitignore
Gemfile
Gemfile.lock
LICENSE
README.md
Rakefile
VERSION

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.