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