Advanced Tricks

JavaScript Disabled

You can handle disabled JavaScript situations using the following style on your elements:

/* Recommended style...
    only show first item in glider targets unless/until JavaScript runs 
*/
.slide > ul > li {
    display: none;
}

.slide > ul > li:first-child {
    display: block;
}

Slide States

Slides are given different classes to tell you what is happening. You can add behaviour to the slides and their contents based on these states.

• selected
• leaving
• arriving

When you change slide, the old slide is given the leaving state until it has been removed. The new slide is given the arriving state and then the selected state.

This means you can add CSS transitions to the contents based on these states.

The following example removed headings for both the leaving and arriving states, then reveals the heading once the selected state is reached. You can use transition delays to reveal content in a cascade.

.slide > ul > li h3 {
    transition: opacity 0.2s ease;
    opacity: 1;
}

/* Show the heading once the slide is in place */
.slide > ul > li.selected h3 {
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Remove the heading during the slides removal */
.slide > ul > li.leaving h3 {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Ensure the heading is removed before the slide appears */
.slide > ul > li.arriving h3 {
    /* Removal speed */
    transition: opacity 0.2s ease;
}

Placing Controls Outside

You can place the controls outside of the glider by passing an ancestor selector. The selector will place the controls in the first matching ancestor of the glider element. For example:

var gliders = $('.slide').glider({
    controls: 'div'
});

The element with the class .slide will be converted into a slider and the controls will placed in the first div element above that element in the DOM.