Sliding Slides - Full-Screen

These slides occupy the full viewport width and height.

.slide-deck--slide-in-over

The new slide slides in over the previous one.

.slide-deck--slide-out-under

The new slide slides out under the previous one. Note that at full-screen it looks like the previous slide is exiting by sliding upwards.

This requires an appropriate z-index be set on each slide (first slide in the source order needs to have the largest z-index). This can be done manually but is probably better done with Javascript. For progressive enhancement, it’s might be worth using Javascript to add the slide-deck--slide-out-under class.

Return to index.