Arc carousel

Ce qui est inclus

Un carrousel d’images posées sur la jante d’une roue géante, dans deux fichiers : une feuille de style et un script. Aucune dépendance, aucune étape de build, aucune requête externe — polices et images sont dans le dossier du composant.

La carte du haut grandit, se soulève et prend la parole ; les autres s’inclinent, rapetissent et s’effacent à mesure qu’elles descendent l’arc. Tout cela dérive d’un seul nombre, --wcar-index, qui vaut la carte sélectionnée. Comme ce nombre est déclaré avec @property, l’animer d’une carte à la suivante fait tourner la roue entière, redimensionne, réordonne les plans et déplace le texte — d’un seul mouvement, puisque tout en descend.

Fonctionnalités

• Marche sans JavaScript — chaque carte est le <label> d’un bouton radio. Cliquer une carte la sélectionne, les flèches du clavier parcourent le groupe, et la roue tourne : c’est le CSS qui lit la sélection avec :has().
• Clavier complet — le groupe de boutons radio apporte son parcours natif ; l’anneau de focus est peint sur la carte, pas sur le contrôle. Le focus suit les flèches de navigation quand la légende change.
• Tirer, faire tourner, relâcher — la roue se saisit partout : sur le fond, sur une carte, sur le texte. Au-delà de cinq pixels la pression devient un glissement ; en deçà, elle reste un clic qui sélectionne. La roue se pose ensuite sur la carte la plus proche avec la courbe d’un ressort, échantillonnée sur l’original.
• Le compte se lit dans le balisage — deux cartes ou douze, l’arc se répartit tout seul. Rien à déclarer, rien à recalculer.
• Une variable pour l’échelle — rayon, cartes, texte, points et soulèvement dérivent de --wcar-font-size ; l’arc, lui, continue de suivre la largeur de son conteneur.
• Ruptures sur le conteneur — l’arc s’ouvre moins et les cartes prennent plus de place dans une colonne étroite, même si la fenêtre, elle, est large.

Le poser dans une page

Deux fichiers à charger, puis une carte par image :

<link rel="stylesheet" href="arc-carousel.css">
<script src="arc-carousel.js" defer></script>

<section class="arc-carousel" data-arc-carousel aria-label="Ambiances">
  <div class="arc-carousel__stage">
    <div class="arc-carousel__halo"></div>

    <div class="arc-carousel__track" role="radiogroup"
         aria-label="Choisir une image">
      <div class="arc-carousel__item">
        <label class="arc-carousel__card">
          <input class="arc-carousel__radio" type="radio"
                 name="roue" checked>
          <img class="arc-carousel__image" src="medias/salon.webp" alt="">
          <span class="arc-carousel__veil"></span>
          <span class="arc-carousel__name">Minimalisme doux</span>
        </label>

        <div class="arc-carousel__caption">
          <div class="arc-carousel__panel">
            <div class="arc-carousel__headline">
              <button class="arc-carousel__arrow" type="button"
                      data-wcar-prev aria-label="Précédente">…</button>
              <p class="arc-carousel__title">Minimalisme doux</p>
              <button class="arc-carousel__arrow" type="button"
                      data-wcar-next aria-label="Image suivante">…</button>
            </div>
            <p class="arc-carousel__text">Des espaces réduits et choisis.</p>
            <a class="arc-carousel__cta" href="#">Explorer</a>
          </div>
        </div>
      </div>

      <!-- … les autres cartes … -->
    </div>

    <div class="arc-carousel__dots" aria-hidden="true">
      <span class="arc-carousel__dot"></span>
    </div>
    <span class="arc-carousel__probe" aria-hidden="true"></span>
    <p class="arc-carousel__status" role="status" aria-live="polite"></p>
  </div>
</section>

Un seul checked dans le groupe, un name différent par carrousel de la page, et c’est tout : le composant compte les cartes lui-même.

Ce qu’il faut savoir

• La roue occupe la hauteur qu’on lui donne. Par défaut 100svh ; la position du bloc de texte se calcule avec cette hauteur, donc la changer déplace le texte, jamais l’arc. C’est --wcar-height.
• La moitié de la roue est hors du cadre. C’est le dessin : les cartes des extrémités sortent par les côtés. Le cadre est en overflow: clip — il ne peut donc pas défiler, et un focus reçu par une carte hors champ ne décale pas la mise en page.
• Sans script, les deux flèches disparaissent. Elles demanderaient « la carte d’après », ce qu’une feuille de style ne sait pas exprimer. Tout le reste — sélection au clic, parcours au clavier, rotation, légendes — continue de fonctionner.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site, et n’utilise jamais innerHTML. Le script écrit sa position par style.setProperty(), que la politique autorise.
• Le dessin vient d’ailleurs. Les proportions reprennent celles d’un composant Framer publié, relevées au navigateur sur le site en ligne à cinq largeurs. Le code, lui, est original : l’original est un carrousel React qui recalcule dix positions à chaque image, celui-ci est une feuille de style qui dérive tout d’un nombre.