Carousel block

A swipeable image gallery, driven entirely by CSS — no JavaScript. It slides in Mail on iOS, iCloud Mail and Thunderbird, and degrades to a single clear image (or, if you choose, a grid of every slide) everywhere else.

How it works

The kinetic tier is a radio-button state machine: each slide gets a hidden radio input sharing one group name, a label rendered as a dot, and a frame whose visibility is controlled by a :checked ~ sibling selector. Tapping a dot (or, where supported, swiping) checks its radio and the matching frame becomes visible while the others stay display:none. The first slide's radio starts checked, so the block always opens on slide one. This is the same mechanism the accordion and scratch-off blocks build on, just applied to a row of mutually exclusive frames instead of independent toggles.

In every other email app (every Gmail app, Yahoo, Outlook.com, the Outlook apps for iOS and Android, and classic Outlook), the block falls back to a static card. By default that card shows only the first slide's image and caption, plus a "See all N slides" link into the hosted live view. The live view is a real webpage, so every slide is one tap away there rather than lost; it reuses the exact same :checked markup, since a real browser always supports it. If every slide matters on its own (a product carousel, say), choose the grid fallback instead: see Where it can't slide. A carousel with only one slide skips the whole state machine and renders as a single static image; there's no gallery to page through.

Configurable fields, all in the block's own inspector panel:

• Where it can't slide — what readers see in email apps that can't run the carousel: First slide, plus a link to the rest (the default) or Every slide in a grid.
• Background color — the card's own background, independent of the email's theme.
• Padding — the block's inner spacing.
• Border — width, style and color around the whole card.
• Border radius on the card.
• Caption color and caption font size — applied to every slide's caption text uniformly.

Each slide (a child of the carousel, added/reordered like any other tree item) carries its own three fields: an image (picked from your media library), a caption, and an optional link URL. If set, tapping the slide's image opens that link, independent of the dot navigation used to move between slides.

Moving to another slide is recorded as a slide view in email apps that can report it, and always in the hosted live view (see Reveals and slide views). Insights › Blocks counts the people who swiped past the first slide, as a share of everyone who opened or engaged. Gmail, Yahoo, Outlook.com and the Outlook apps show the fallback, where there's nothing to swipe, so read that share as a lower bound. A slide's own link, if set, is a plain link-bearing element: it gets a "click" action routed through the recipient's tracked redirect the same way a button or linked image does, and rolls into the project's click heatmap. Each slide's link is tracked on its own, so you can tell which product was clicked, and an experiment counts those clicks in its unique click rate.

Examples

A product-drop email can use a carousel to show three or four angles of a new item, each slide linking to that specific variant's page — useful anywhere a single hero image undersells the product. See Ecommerce & product drops for the broader pattern of driving clicks straight from a promotional send. A "what's new this month" digest can carry one slide per feature or article, each captioned and linked to the full write-up, so the whole roundup fits in one scannable block instead of a long vertical stack. An event recap can page through photos from the last session with captions naming the moment. Recipients who want to see everything just tap through, and anyone whose client can't animate it still gets the cover photo and a link to the rest.

What the static fallback looks like

<div style="margin:12px 0;background-color:transparent">
  <div class="carousel-fallback">
    <div class="lv-frame lv-frame-0">
      <a href="https://example.com/product-a">
        <img src="https://cdn.example.com/slide1.jpg" alt="Slide 1" style="width:100%;max-width:100%">
      </a>
      <p style="margin:8px 0 0;font-size:14px;color:#374151">Slide 1</p>
    </div>
    <p style="margin:8px 0 0;font-size:13px">
      <a href="https://mailinapp.com/v/eyJhbGci..." style="color:#4f46e5">See all 4 slides &rarr;</a>
    </p>
  </div>
</div>

This is what an email app that can't slide the carousel renders: the first slide, its caption, and a link to the hosted live view where the rest of the gallery is reachable. In a client that honors the kinetic tier, this same markup is present but CSS-hidden, and the radio/dot state machine takes over instead.

Where it can't slide

The default fallback suits a photo gallery: the cover image tells the story, and the rest is a tap away. A product carousel is different. If each slide is a product with its own link, readers in Gmail, Yahoo or Outlook would only ever see the first product, and many won't tap through to find the others.

Set Where it can't slide to Every slide in a grid and those readers get every slide instead, two per row, each image linked just like on its slide. Since everything is already on screen, the "See all" link is left out. Readers whose email app can run the carousel still get the swipeable version; the grid only appears where the carousel can't.

Here's a product carousel with the grid fallback, as an email app that can't run the carousel shows it:

<div class="carousel-fallback">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="carousel-grid">
    <tr>
      <td width="50%" valign="top" style="width:50%;padding:4px;vertical-align:top">
        <a href="https://example.com/tee"><img src="https://cdn.example.com/tee.jpg" alt="Tee" style="width:100%;max-width:100%"></a>
        <p style="margin:8px 0 0;font-size:14px;color:#374151">Tee</p>
      </td>
      <td width="50%" valign="top" style="width:50%;padding:4px;vertical-align:top">
        <a href="https://example.com/jacket"><img src="https://cdn.example.com/jacket.jpg" alt="Jacket" style="width:100%;max-width:100%"></a>
        <p style="margin:8px 0 0;font-size:14px;color:#374151">Jacket</p>
      </td>
    </tr>
  </table>
</div>

Good to know before you switch:

• The grid makes the email longer in those apps: six slides become three rows. Keep product carousels to a handful of slides.
• It isn't the default, so carousels you already built keep their current fallback until you change the setting. The preflight checklist reminds you when a carousel has linked slides but still falls back to its first slide.
• The MailInApp mobile app shows its own native carousel, so this setting doesn't change anything there.

Arrows, thumbnails, prices and autoplay

A carousel can do more than page through pictures. These options are in the carousel's inspector panel. Each is off until you turn it on, so carousels you already built don't change.

• Arrows: previous and next buttons over each slide's picture. They wrap around, so "next" on the last slide goes back to the first. In a right-to-left email, "previous" sits on the right.
• Slide picker: Dots (the default) or Thumbnails, a row of small square pictures of the slides with the one showing outlined in your brand color. Thumbnail size sets how big they are, from 40 to 120 pixels.
• Play by itself: moves to the next slide every few seconds (Seconds per slide, from 2 to 10). It stops for good once the reader picks a slide with a dot, thumbnail or arrow. Readers who've asked their device to reduce motion see the first slide, standing still.
• Price and Button label, on each slide: the price shows under the caption and the button under the price. The button opens the slide's own link, so it only appears on a slide that has one, and its clicks count as clicks on that slide. Price color, Price font size, Button text color and Button background style them for the whole carousel. Left unset, the button looks like your theme's primary button.

Prices and buttons are part of the slide, so they also show where the carousel can't slide: under the first slide, or under every slide in the grid. Arrows, thumbnails and autoplay only exist where the carousel slides, and everywhere else readers get the same fallback as before. Preflight warns you about a slide with a button label but no link. The MailInApp mobile app draws all of these natively.

Related

• Block reference overview
• How fallbacks work
• Interactions & analytics