mailinapp
Documentation menu

Bloc Carrousel

Une galerie d'images à glisser, entièrement pilotée en CSS — aucun JavaScript, donc elle fonctionne dans tout client prenant en charge la technique :checked sous-jacente, et se dégrade en une seule image claire partout ailleurs.

Comment ça fonctionne

Le niveau cinétique est une machine à états à boutons radio : chaque diapositive reçoit une entrée radio cachée partageant un même nom de groupe, une étiquette rendue comme un point, et un cadre dont la visibilité est contrôlée par un sélecteur de fratrie :checked ~. Toucher un point (ou, là où c'est pris en charge, glisser) coche son bouton radio et le cadre correspondant devient visible tandis que les autres restent en display:none. Le bouton radio de la première diapositive commence coché, donc le bloc s'ouvre toujours sur la diapositive une. C'est le même mécanisme sur lequel s'appuient les blocs accordéon et carte à gratter, simplement appliqué à une rangée de cadres mutuellement exclusifs plutôt qu'à des bascules indépendantes.

Là où cette technique CSS n'est pas honorée (le moteur de rendu Word d'Outlook, et tout client qui retire les balises <style> ou ignore les sélecteurs de fratrie), le bloc se replie sur une carte statique. Cette carte n'affiche que l'image et la légende de la première diapositive, plus un lien « Voir les N diapositives » vers la vue en direct hébergée. La vue en direct est une vraie page web, donc chaque diapositive y est à portée d'un tap plutôt que perdue ; elle réutilise exactement le même balisage :checked, puisqu'un vrai navigateur le prend toujours en charge. Un carrousel avec une seule diapositive saute entièrement la machine à états et se rend comme une simple image statique ; il n'y a pas de galerie à parcourir.

Champs configurables, tous dans le propre panneau inspecteur du bloc :

  • Couleur de fond — le fond propre de la carte, indépendant du thème de l'email.
  • Marge intérieure — l'espacement interne du bloc.
  • Bordure — largeur, style et couleur autour de toute la carte.
  • Rayon de bordure sur la carte.
  • Couleur de légende et taille de police de légende — appliquées uniformément au texte de légende de chaque diapositive.

Chaque diapositive (un enfant du carrousel, ajouté/réordonné comme tout autre élément de l'arborescence) porte ses trois propres champs : une image (choisie depuis votre bibliothèque de médias), une légende, et une URL de lien facultative. Si elle est définie, toucher l'image de la diapositive ouvre ce lien, indépendamment de la navigation par points utilisée pour se déplacer entre les diapositives.

Les diapositives ne sont pas des événements d'interaction — un destinataire qui parcourt un carrousel ne soumet rien, donc rien concernant la navigation du carrousel n'apparaît dans le tableau de bord des réponses, l'export CSV, ou un webhook de projet. Le propre lien d'une diapositive, s'il est défini, est un simple élément porteur de lien : il reçoit une action "click" acheminée via la redirection suivie du destinataire de la même façon qu'un bouton ou une image liée, et remonte dans la carte de chaleur des clics du projet.

Exemples

Subject

New arrivals just landed

Un email de lancement de produit peut utiliser un carrousel pour montrer trois ou quatre angles d'un nouvel article, chaque diapositive créant un lien vers la page de cette variante spécifique — utile partout où une seule image héroïque sous-vend le produit. Voir Ecommerce et lancements de produits pour le modèle plus large consistant à générer des clics directement depuis un envoi promotionnel. Une synthèse « les nouveautés du mois » peut porter une diapositive par fonctionnalité ou article, chacune légendée et reliée à l'article complet, afin que toute la sélection tienne dans un seul bloc parcourable au lieu d'une longue pile verticale. Un récapitulatif d'événement peut faire défiler des photos de la dernière session avec des légendes nommant chaque moment. Les destinataires qui veulent tout voir n'ont qu'à parcourir les diapositives, et quiconque a un client incapable de l'animer obtient quand même la photo de couverture et un lien vers le reste.

À quoi ressemble l'alternative statique

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

Voici ce qu'un client de la classe Outlook rend : la première diapositive, sa légende, et un lien vers la vue en direct hébergée où le reste de la galerie est accessible. Dans un client qui honore le niveau cinétique, ce même balisage est présent mais masqué par CSS, et la machine à états radio/points prend le relais à la place.

Voir aussi