Helium-slider

Helium-slider is a responsive jQuery image slider, built by Harun Eggleton under the open source MIT licenece.

Features:

• fader/slider modes
• optional next/previous buttons
• optional pause on hover
• optional pause on focus
• optional pause/play button controls
• autoplay
• adjustible animation speeds/delays
• afterSlide callback for custom javascipt after each slide transitions
• any number of individually animated panes on each slide (these fully customizable HTML elements each have thier own options for speed, delay, x offset, y offset and fade.)

Examples:

Usage:

1: Include required files

include the following scripts as follows before the end of the BODY tag

2: Add required HTML

add the following HTML wherever you want your slider to appear

3: Add CSS

Add the following CSS in main.css (or any desired css location)

4: initialize

Place the follow before the end of the BODY tag to initialize your slider. this example includes all options for initializing the slider

Using Panes

Pane elements must be positioned absolutely from top or bottom, and left or right.

The animation of the pane is defined by the pane settings (paneXOffset, paneYOffset, paneDelay, paneSpeed). Offsets animate the provided number in pixels, in the same direction as the slide animation. This direction may be reversed by entering a negative value.

To add more panes, simply add more pane elements in your html. you can add an additional class to each of them to position them differently.

To animate multiple panes differently separate the desired settings with commas. The values will apply in sequence to the panes in each slide. In the below example 100 will apply to the first pane, 200 to the second, and 300 to the third.