1. Basic Carousel
The images for this example are stored in the images directory.
2. Height Carousel
The height of this carousel is limited to 32rem.
3. Width Carousel
The width of this carousel is limited to 32rem.
4. Aligned Carousel
The align attribute positions the stage to the left, right, or center. With align=left or align=right, the carousel floats so following content can fill the opposite side. The default is center.
4.1. align=left
This paragraph follows a left-aligned carousel. It wraps into the space on the right side of the carousel instead of starting below it.
4.2. align=right
This paragraph follows a right-aligned carousel. It wraps into the space on the left side of the carousel instead of starting below it.
4.3. align=center
A centered carousel stays in the normal document flow, so this paragraph starts below it.
5. Advanced Carousel
This carousel enables autoplay, looping, a fade transition, pause-on-hover, and a fixed stage height (height=32rem).
6. Transition Effects
The fade attribute selects the effect used to move between slides.
Each carousel below uses the same four images so the effects can be compared directly.
6.1. Slide
The default effect moves the slides horizontally.
6.2. Fade
The slides cross-fade in place.
6.3. Zoom
The incoming slide settles back to its natural size while the outgoing slide grows towards the reader.
6.4. Flip
Each slide turns around its vertical centre line.
6.5. Cube
The slides roll as the faces of a cube.
6.6. Cards
The neighbouring slides stay visible behind the active one.
6.7. Coverflow
The active slide is set back from the edges so the neighbouring slides can stand beside it, turned towards the middle.
6.8. Ken Burns
The slide on screen grows from just under its full size into place while the slides cross-fade.
7. Carousel with Diagrams
This example requires Asciidoctor Diagram.
