Dots Navigation
Carrousel sans flèches : une rangée de pastilles posée au bas de l'image, une par diapositive ; un clic sur une pastille fait glisser la piste droit jusqu'à elle.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Galerie comprend 44 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La navigation passe par des pastilles et non par des flèches : c'est ce qui distingue cet effet du Vertical Slider de la même catégorie, qui garde des flèches et monte ou descend. Le script compte les .dtnv-slide et crée dans .dtnv-dots un bouton par diapositive. Cliquer sur la quatrième pastille amène directement la quatrième image, sans passer une à une par les précédentes : la piste horizontale .dtnv-track reçoit translateX(-300%) et glisse en 0,5 s.
La pastille de l'image visible se remplit et grossit légèrement (is-active, scale(1.2)) ; les autres restent des anneaux blancs de 10 px. Chaque pastille est un bouton de 24 × 24 px, assez grand pour le pouce, même si l'anneau dessiné est petit.
Deux gestes complètent les pastilles : les touches ← et → (le focus suit alors la pastille active) et le glisser horizontal de plus de 50 px au doigt ou à la souris, géré par les Pointer Events. Ces deux-là avancent d'un cran et repartent de la première après la dernière. Aucune animation ne démarre sans action de la personne.
Ajouter ou retirer une image ne demande aucune retouche des pastilles : elles sont recréées d'après le nombre de diapositives au chargement. Une photo s'ajoute en <img> dans la diapositive (couverture totale en object-fit: cover). Chaque .dtnv-carousel a sa propre instance, rien n'est exposé sur window.
Accessibilité
- Pastilles atteignables : de vrais
<button type="button">placés dans l'ordre du Tab, nommés « Diapositive 1 », « Diapositive 2 »… ; celle de l'image visible portearia-current="true". - Carrousel décrit :
role="region"+aria-roledescription="carrousel"sur le cadre, et pour chaque image un groupe « diapositive » nommé « 2 sur 5 ». - Rien de caché n'est atteint :
inertetaria-hiddensur les images hors du cadre. - Changement annoncé : zone
aria-live="polite"invisible (« diapositive 4 sur 5 »), silencieuse au chargement. - Mouvement réduit : sans glissement sous
prefers-reduced-motion: reduce; la pastille cliquée affiche quand même la bonne image.
Compatibilité navigateur
Un peu plus de 4 Ko de JavaScript autonome. Relevé le 08/11/2026 avec Playwright (Chromium, Firefox, WebKit) : pastilles atteintes au Tab et activées à Entrée, flèche → depuis une pastille, deux carrousels indépendants, script exécuté deux fois sans doublon de pastilles, glisser au doigt à 390 px (Chromium) et à la souris, mouvement réduit, aucune erreur. Versions minimales d'après @mdn/browser-compat-data 8.1.8 ; la plus exigeante est inert.
Avant inert, le carrousel marche mais un lien dans une image masquée reste joignable au clavier. Sans aspect-ratio (Safari 14), donnez --dtnv-height. Sans JavaScript, aucune pastille n'est créée et seule la première image se voit. Dans Safari sur Mac, le Tab ne s'arrête sur les boutons que si l'option « Tab sélectionne chaque élément » est active (réglage du système, pas de l'effet).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0164-root">
<div class="dtnv-carousel" role="region" aria-roledescription="carrousel" aria-label="Diaporama" data-slide="diapositive" data-of="sur">
<div class="dtnv-track">
<div class="dtnv-slide"><span class="dtnv-caption">Slide 1</span></div>
<div class="dtnv-slide"><span class="dtnv-caption">Slide 2</span></div>
<!-- … autant de div.dtnv-slide que d'images -->
</div>
<div class="dtnv-dots"></div> <!-- les boutons-pastilles y sont créés par le script -->
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Couleur des pastilles (CSS — --dtnv-dot-color sur .fx-0164-root) |
#fff | Anneau, remplissage de la pastille active et contour de focus. Sur fond clair, une couleur foncée. |
Largeur maximale et format (CSS — --dtnv-width, --dtnv-ratio) |
640px · 16 / 10 | Le cadre suit la largeur disponible jusqu'à cette limite ; la hauteur découle du format. |
Hauteur fixe (CSS — --dtnv-height) |
auto | Pour une tuile ou un écran : 190px, 100%… |
Vitesse du glissement (CSS — --dtnv-duration) |
0.5s | Courbe cubic-bezier(.25,.46,.45,.94) conservée ; le saut de la 1re à la 5e image prend le même temps qu'un pas. |
Arrondi (CSS — --dtnv-radius) |
1rem | 0 pour un plein écran. |
Fond de démonstration (CSS — --dtnv-stage-bg, --dtnv-stage-padding, --dtnv-stage-min-height) |
#0a0a0f · 25px 16px · 300px | À neutraliser dans votre page (transparent, 0, 0). |
Libellés (HTML — data-slide, data-of, aria-label) |
diapositive · sur · Diaporama | data-slide nomme aussi les pastilles (« Diapositive 3 ») : mettez slide et of pour l'anglais. |
FAQ
.dtnv-dot et dessine l'anneau avec ::before. Pour des numéros, ajoutez dot.textContent = i + 1; à la création du bouton dans le script et retirez la règle .dtnv-dot::before ; le nom accessible « Diapositive N » posé par aria-label reste en place.
