Depth carousel

Ce qui est inclus

Une bande de cartes qui se tire à la souris, part en inertie quand on lâche et tourne sans fin, dans deux fichiers : une feuille de style et un script. Aucune dépendance, aucune étape de build, aucune requête externe — on les copie dans un projet et ça marche.

Le rail n’est pas un carrousel maison : c’est un overflow-x: auto ordinaire. Le navigateur sait déjà le faire défiler à la molette, au pavé tactile, au doigt, à la barre et aux flèches — hors du fil principal, avec la physique de la plateforme. Le script n’en remplace rien : il ajoute le glisser-déposer, l’inertie, la boucle et le pivot par-dessus.

Fonctionnalités

• Défilement automatique — la bande dérive seule à 60 px/s, la vitesse relevée sur le modèle, et s’arrête sous le pointeur, sous le focus clavier, pendant un geste, dans un onglet masqué et en mouvement réduit.
• Glisser et inertie — la bande suit le pointeur, puis continue sur sa lancée avec la décélération relevée sur le modèle. Le tactile garde le défilement natif, qui est meilleur que tout ce qu’un script peut imiter.
• Boucle sans fin — les cartes sont clonées au montage et la position se replie d’un jeu entier quand on dépasse. On écrit neuf cartes, pas vingt-sept.
• Profondeur en option — une classe suffit : les cartes pivotent et reculent selon leur distance au centre. Le script ne publie que cette distance, les quantités restent en CSS.
• Marche sans JavaScript — la bande défile toujours, et sa barre de défilement reste visible tant que le script n’a pas pris la main, puisque c’est alors la seule prise.
• Une variable pour l’échelle — carte, gouttière, arrondi, ombre, marges et corps du texte dérivent tous de --dc-font-size.
• Trois types de carte — image, vidéo, et un panneau de texte livré en trois teintes, chacune avec son échelle typographique relevée.

Le poser dans une page

Deux fichiers à charger, puis le balisage :

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

<div class="depth-carousel" data-depth-carousel data-label="Nos réalisations">
  <div class="depth-carousel__rail">
    <ul class="depth-carousel__track">
      <li class="depth-carousel__slide">
        <article class="depth-carousel__card">
          <img class="depth-carousel__media" src="…" alt="…">
        </article>
      </li>
    </ul>
  </div>
</div>

C’est tout : l’attribut data-depth-carousel suffit, le composant s’installe au chargement. Les voiles des bords sont dessinés par la feuille de style, il n’y a rien à écrire pour eux. Pour changer l’allure, une variable suffit — --dc-font-size remet tout à l’échelle, --dc-scene-height règle la hauteur de la bande, --dc-veil-opacity: 0 retire les voiles.

Dans une application, DepthCarousel.init(element) rend une instance qui porte next(), goTo() et destroy() — de quoi le monter et le démonter proprement dans un rendu qui se répète.

Ce qu’il faut savoir

• La molette ne bloque pas la page. Seule une intention horizontale — pavé tactile de côté, Maj + molette — fait avancer la bande. Le modèle détourne toute molette, verticale comprise, ce qui piège le défilement de la page tant que le pointeur la survole : data-wheel="capture" remet ce comportement si tu le veux vraiment.
• La carte est en pixels fixes — 270 × 431, identique de 390 à 1920 de large. Seul le remplissage de la piste suit la fenêtre, et c’est lui qui permet à la première et à la dernière carte de venir se poser au centre.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site et n’utilise jamais innerHTML : les clones passent par cloneNode, la profondeur par deux variables CSS. Vérifié en servant le dossier sous CSP, pas supposé.
• Le dessin vient d’ailleurs. Les proportions reprennent celles d’un composant de code Framer, relevées sur la page réelle une fois hydratée. Le code, lui, est original, et les neuf visuels de la démonstration sont fabriqués en local par le script du banc.