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.

Get it from Github

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.