Introduction

aSlyder is a slideshow engine, built using the jQuery framework.

With proper design, it is fully accessible, and accidentally responsive. It is flexible enough to fit into any project, working with any size slideshow. Configuration requires no scripting skills, and is done completely with the use of CSS classes, making it quick and easy for any non-scripter to use.

The aSlyder slideshow engine is designed to be a tool for professional developers, not as a drop-in solution. Use requires advanced HTML and CSS skill.

aSlyder is compatible with jQuery versions 1.4 through 2.0+, and works in most browsers, even IE7.

aSlyder is also available as a Wordpress plugin offering easy addition to Wordpress sites and themes, and easy configuration inside the administration panel.

Setup

For basic use, configuration is simple.

Create a container for the slide show and give it the ID "#aslyder". Create an unordered list with a set of list items for each slide.

Set #aslyder to the height and width of the slides. Set position:relative, and overflow:hidden;

Set #aslyder > ul to position:relative; and white-space:nowrap

The slideshow will start automatically with these settings. No script activation is needed to start the animation.

See the tutorial demo for basic setup. For other options, see the demos for specific configurations and examples.

Configuration Classes

Add any of the following CSS classes to the #aslyder container to configure the slideshow behavior

autoff - Disables the auto-start of the slideshow.

fadestyle - Slides fade rather than slide.

peel-[up/down/left/right] - Peels top slide off to reveal next in stack

contslide - Slides loop at end, instead of the default snapback. Has no effect in peel or fade modes.

speed-[amount] - Controls the speed of the transition. In milliseconds. Default 800

pause-[amount] - Sets the duration the slide stays in place between transitions. In milliseconds. Default 5000

Slide Navigation

To add slide navigation, there are two options. For either option, add a division container with the ID of either #aslyder-nav or #aslyder-thumbs

#aslyder-nav will be automatically populated with a list of numbered links corresponding to each slide

#aslyder-thumbs is filled with clones of the slides. The clones are identical in size to the slides by default, and need to be scaled with CSS.

Either #aslyder-nav or #aslyder-thumbs can be placed anywhere on the page. They do not need to be set inside the #aslyder container to work