Pagination à points qui s'étirent
Un carrousel dont le point actif s'étire en pilule qui se remplit avec le temps avant de passer à la suite.
Réglages
Code
<section class="uv-nsd" aria-roledescription="carrusel" aria-label="À la une"><div class="tr" tabindex="0"><article style="--a:#ff9a8b;--b:#ff6a88" aria-label="1 / 4"><b>Nouveaux itinéraires d’été</b></article><article style="--a:#a1c4fd;--b:#c2e9fb" aria-label="2 / 4"><b>Escapades du week-end</b></article><article style="--a:#d4fc79;--b:#96e6a1" aria-label="3 / 4"><b>Sorties nature</b></article><article style="--a:#fbc2eb;--b:#a6c1ee" aria-label="4 / 4"><b>Villes à découvrir à pied</b></article></div><div class="ft"><button type="button" class="pv" aria-label="Précédent"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><div class="dt"><button type="button" aria-label="Aller à 1" aria-current="true"><i></i></button><button type="button" aria-label="Aller à 2"><i></i></button><button type="button" aria-label="Aller à 3"><i></i></button><button type="button" aria-label="Aller à 4"><i></i></button></div><button type="button" class="nx" aria-label="Suivant"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div></section>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Navigation
Voir tout : NavigationOù l’utiliser
Les carrousels façon stories affichent la progression dans le point actif, on sait donc quand la diapositive suivante arrive. Ici, le point courant s'élargit en pilule qui se remplit de gauche à droite, puis le carrousel passe à la carte suivante et le point suivant s'étire. Le survol ou le focus met en pause, flèches et points sautent directement.
Le rail utilise le scroll snap natif, le balayage tactile fonctionne donc d'emblée et les points restent synchronisés. Avec le mouvement réduit, le minuteur s'arrête et la pilule apparaît pleine.