Auto-play Slider
Diaporama qui avance seul : une barre se remplit, la diapositive suivante glisse, et tout s'arrête dès que la souris ou le clavier s'y pose.
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 racine .fx-0163-root contient un .apl-carousel (région nommée), une fenêtre .apl-viewport et une piste .apl-track en display:flex : chaque .apl-slide occupe 100 % de la largeur, et la piste glisse de translateX(-100 %) par diapositive en 0,5 s. Une <img> posée dans une diapositive la couvre entièrement (object-fit: cover) ; sans image, les cinq dégradés indigo → ambre de la démo s'appliquent.
Le script cherche chaque .fx-0163-root de la page et lui donne sa propre minuterie : deux carrousels sur une page vivent chacun leur vie. Une boucle requestAnimationFrame remplit la barre .apl-progress au temps réellement écoulé (pas d'au plus 50 ms par image, donc pas de saut au retour d'un onglet caché) ; quand elle atteint 100 %, la diapositive suivante arrive et la barre repart de zéro. Durée : data-apl-interval, 3000 ms par défaut, 1000 ms au minimum.
La lecture s'interrompt tant que la souris survole le carrousel, tant que le focus clavier est à l'intérieur, et quand le carrousel sort de l'écran (la boucle est alors arrêtée, pas seulement masquée). Le bouton rond en haut à droite met en pause ou relance ; demander la lecture avec ce bouton passe avant la pause de survol. Les flèches ‹ › et un glisser horizontal de plus de 50 px (doigt ou souris) changent de diapositive et remettent la barre à zéro.
Accessibilité
- Rôles de carrousel :
role="region"+aria-roledescription="carrousel"et un nom sur le conteneur ; chaque diapositive est unrole="group"annoncé « diapositive, 2 sur 5 ». Ces textes sont dans le HTML : traduisez-les et mettez à jour « X sur N » si vous changez le nombre de diapositives. - Pause : bouton nommé « Mettre en pause la lecture automatique » / « Reprendre la lecture automatique » selon l'état, plus arrêt au survol, au focus clavier et hors écran. Les diapositives cachées sont
inert: un lien qu'elles contiennent ne reçoit pas le focus. - Annonces : la piste est en
aria-live="off"pendant la lecture (rien n'est lu toutes les 3 s) et passe enpoliteune fois en pause, pour que la diapositive choisie aux flèches soit annoncée. - Mouvement réduit : sous
prefers-reduced-motion: reduce, le carrousel démarre en pause et les changements se font sans glissement ; les flèches, le glisser et le bouton de lecture restent actifs. - Toucher : Pointer Events avec
touch-action: pan-ysur la fenêtre : un geste horizontal change de diapositive, un geste vertical fait défiler la page normalement.
Compatibilité navigateur
JavaScript sans dépendance (requestAnimationFrame, Pointer Events, IntersectionObserver) et attribut inert (Chrome 102, Firefox 112, Safari 15.5 d'après MDN). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux copies dont la 2e pilotée seule, lecture qui avance sans survol et s'arrête au survol, mouvement réduit, 390 px sans défilement horizontal, glisser au doigt (Chromium) sans bloquer le défilement vertical, 0 erreur.
Sans JavaScript, la première diapositive reste affichée, les boutons ne font rien. Avant Safari 15.5 / Firefox 112, inert est ignoré : tout fonctionne, mais un lien d'une diapositive cachée peut recevoir le focus.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0163-root" data-apl-interval="3000">
<div class="apl-carousel" role="region" aria-roledescription="carrousel" aria-label="…">
<div class="apl-viewport">
<div class="apl-track" aria-live="off">
<div class="apl-slide" role="group" aria-roledescription="diapositive" aria-label="1 sur 5"><img src="…" alt="…"></div>
…
</div>
</div>
<div class="apl-progress" aria-hidden="true"></div>
<button class="apl-toggle" type="button" aria-label="…" data-apl-label-pause="…" data-apl-label-play="…"><svg class="apl-icon-pause">…</svg><svg class="apl-icon-play">…</svg></button>
<button class="apl-arrow apl-prev" type="button" aria-label="…">…</button>
<button class="apl-arrow apl-next" type="button" aria-label="…">…</button>
</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 |
|---|---|---|
Durée d'une diapositive (HTML — data-apl-interval sur .fx-0163-root) |
3000 (ms) | Temps de remplissage de la barre avant le passage à la suivante. Minimum 1000 ms. Pour du texte à lire, visez 5000 ms ou plus. |
Largeur maximale (CSS — --apl-max-width) |
640px | Le carrousel prend la largeur de son conteneur jusqu'à cette limite. none pour occuper toute la largeur. |
Proportions (CSS — --apl-ratio) |
16 / 10 | Rapport largeur/hauteur. auto si vous imposez une hauteur au carrousel. |
Contenu des diapositives (HTML — .apl-slide) |
5 dégradés « Slide 1 » à « Slide 5 » | Mettez-y une <img> (elle couvre toute la diapositive) et/ou du texte. Ajoutez ou retirez des diapositives librement, en mettant à jour leurs aria-label « X sur N ». |
Libellés du bouton pause (HTML — data-apl-label-pause / data-apl-label-play) |
« Mettre en pause la lecture automatique » / « Reprendre la lecture automatique » | Nom lu par les lecteurs d'écran selon l'état ; à traduire avec les autres libellés. |
Vitesse du glissement (CSS — .apl-track) |
transform .5s cubic-bezier(.25,.46,.45,.94) | Durée et courbe de la transition entre deux diapositives. |
Couleur de la barre (CSS — .apl-progress) |
dégradé #6366f1 → #d946ef, 4 px | Fond et hauteur de la barre de progression posée en bas du carrousel. |
FAQ
inert. Quand un visiteur tabule jusqu'au lien, la lecture se met en pause pour qu'il ait le temps de l'activer.apl-paused sur .apl-carousel) : sinon ce clic lancerait la lecture chez les personnes en mouvement réduit. Par exemple var r = document.querySelector('.fx-0163-root'); if (!r.querySelector('.apl-paused')) r.querySelector('.apl-toggle').click();. Les flèches et le glisser continuent de fonctionner.
