jQuery CSS Slider

by David Wallin

What is it?

A simple jQuery carousel or slider that leverages CSS transitions instead of javascript animations. You can change the animation by simply changing the CSS styles for the previous and next classes.

3 across example

5 across example

Events:

Usage

$("myULList").AnimatedSlider( { } ); Note: Behavior may be undefined if you have less than 3 items.

options = {
    infiniteScroll: true,
    visibleItems: 3,        // 3 or 5. if 5, next_item_2 and previous_item_2 will be used.
    changedCallback: function(animatedSliderObject, currentItem),       // called every time the slide changes
    willChangeCallback: function(animatedSliderObject, currentItem),    // called before the change transition
    userChangedCallback: function(animatedSliderObject, currentItem),   // called after the transition
};

// Note: all parameters are optional

CSS Classes Needed: (see animated-slider.css)

previous_hidden
next_hidden
previous_item
next_item
previous_item_2 * Only used with 5 across
next_item2 * Only used with 5 across
current_item

Also, the LI needs to have css transitions set up.

You can get access to the AnimatedSlider object by:

var slider = $("myULList").data("AnimatedSlider");

Methods

slider.setItem(n);

Jump to the specified index

slider.prevItem();

Go to the previous item

slider.nextItem();

Go to the next item

slider.refresh();

Refresh the presentation (basically just sets the classes again) in case something changed.

Variables

numSliderItems - the number of items in the slider
currentItem - the current index

License

Available under the MIT license.