comark plugins
Esc

Screenshots in a carousel

Put each step of a flow on its own slide, with its marks and notes, and the reader pages through them in place or zoomed.

Playground
1. Find the export
Office correlations dashboard1
  1. 1
    Export CSV sits in the page header.
2. Set the filters
Filter toolbar on one row1
  1. 1
    Open +2 filters and set the moon phase. The export includes only the rows the filters show.
3. Apply
Filter toolbar on one row1
  1. 1
    Apply updates the table, and the export follows it.
1 / 3

Each screenshot is a slide. Its title heads the slide, so the reader knows which step they're on, and the notes stay with their screenshot. A click zooms the current slide, and the zoomed view pages through the others.

When to use it

Use a carousel for a sequence: the steps of a flow, or one view at several sizes. For one view before and after a change, use ::compare, which is a two-column carousel already and continues the note numbers from one side to the other.

Two at a time

columns=2 shows two steps side by side on a wide page and one at a time on a narrow one:

::carousel{title="Exporting the pigeon data" columns=2}
:::screenshot{src="/dashboard.png" alt="Office correlations dashboard" title="1. Find the export"}
:::

:::screenshot{src="/after.png" alt="Filter toolbar on one row" title="2. Apply"}
:::
::
md

Each slide sits on a soft panel as tall as the tallest one, so screenshots of different heights line up. Set --cc-surface: transparent and --cc-padding: 0 to drop the panel, as the carousel's Theming page shows.