mailinapp
Documentation menu

Carousel block

A swipeable image gallery, driven entirely by CSS — no JavaScript, so it works in every client that supports the underlying :checked technique, and degrades to a single clear image 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.

Where that CSS technique isn't honored — Outlook's Word rendering engine, and any client that strips <style> blocks or ignores sibling selectors — the block falls back to a static card showing 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. 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:

  • 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.

Slides aren't interaction events — a recipient paging through a carousel doesn't submit anything, so nothing about carousel navigation appears in the responses dashboard, the CSV export, or a project webhook. 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.

Examples

Subject

New arrivals just landed

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 Outlook-class client 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.

Related