Infinite Loop
Carrousel sans bout : après la dernière diapositive la piste continue vers la première dans le même sens, sans jamais rembobiner. Flèches, clavier et doigt.
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
Le HTML ne contient que les vraies diapositives. Au chargement, le script en fait une copie complète avant et une après (.inlp-clone), puis cale la piste sur la première vraie diapositive sans transition. Il y a donc trois séries côte à côte : copies, originales, copies.
Un clic sur › fait glisser la piste d'un cran (0,5 s). Depuis la dernière diapositive, le cran suivant arrive sur la copie de la première, à droite ; à la fin de la transition (transitionend), le script replace la piste sur la vraie première, sans animation. Les deux étant identiques, l'œil ne voit rien : la boucle continue toujours dans le même sens. Même chose vers la gauche avec ‹.
Les clics rapides sont pris en compte : si la piste est encore sur une copie quand arrive le clic suivant, elle est d'abord ramenée sur l'original correspondant. Les touches ← → et le glisser horizontal de plus de 50 px (Pointer Events) suivent le même chemin. Sous mouvement réduit, il n'y a pas de transitionend : le retour se fait aussitôt.
Les fonds de démonstration sont posés par classe (inlp-demo-1 à -5) pour que les copies gardent exactement le même aspect. Vos photos se placent en <img> dans les diapositives, copiées elles aussi. L'indice « Glisser » est décoratif : sa flèche oscille trois fois puis s'arrête. Chaque .inlp-carousel a sa propre boucle, rien n'est déclaré sur window, et un script collé deux fois ne refait pas les copies.
Accessibilité
- Copies invisibles pour l'accessibilité : chaque copie reçoit
aria-hidden="true"etinert, perd sesidet ses rôles ; un lecteur d'écran ne trouve que les vraies diapositives. - Structure :
role="region",aria-roledescription="carrousel", diapositives en groupes « diapositive » nommés « 5 sur 5 » ; seule la diapositive visible reste atteignable. - Annonce : après chaque changement, une zone
aria-live="polite"invisible dit « diapositive 1 sur 5 » ; le passage de la dernière à la première est annoncé comme un pas ordinaire. - Commandes : deux vrais boutons nommés, anneau de focus blanc, ← et →. L'indice « Glisser » est masqué aux lecteurs d'écran (
aria-hidden). - Mouvement réduit : plus de glissement ni d'oscillation de l'indice sous
prefers-reduced-motion: reduce; la diapositive change d'un coup et la boucle reste sans fin.
Compatibilité navigateur
Environ 5 Ko de JavaScript sans dépendance. Vérifié le 08/11/2026 avec Playwright dans Chromium, Firefox et WebKit : 15 diapositives dans la piste (5 + 2 × 5 copies), toutes avec leur fond, ordre 1-2-3-4-5-1-2-3 en avançant et 2-1-5 en reculant, douze séries de clics rapides au hasard sans décalage, deux carrousels indépendants, script collé deux fois sans nouvelles copies, glisser au doigt (Chromium, 390 px) et à la souris, mouvement réduit. Versions minimales d'après @mdn/browser-compat-data 8.1.8 (inert).
Sans inert, les copies restent masquées aux lecteurs d'écran (aria-hidden) mais un lien qu'elles contiennent pourrait recevoir le focus. Sans aspect-ratio (Safari 14), fixez --inlp-height. Sans JavaScript : pas de copies, la première diapositive seule.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0170-root">
<div class="inlp-carousel" role="region" aria-roledescription="carrousel" aria-label="Diaporama" data-slide="diapositive" data-of="sur">
<div class="inlp-track">
<div class="inlp-slide inlp-demo-1"><span class="inlp-caption">Slide 1</span></div>
<div class="inlp-slide inlp-demo-2"><span class="inlp-caption">Slide 2</span></div>
<!-- … seulement les vraies diapositives : les copies sont faites par le script -->
</div>
<button type="button" class="inlp-arrow inlp-prev" aria-label="Diapositive précédente"><svg>…</svg></button>
<button type="button" class="inlp-arrow inlp-next" aria-label="Diapositive suivante"><svg>…</svg></button>
<div class="inlp-hint" aria-hidden="true"><svg>…</svg> Glisser</div>
</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 du glissement (CSS — --inlp-duration sur .fx-0170-root) |
0.5s | Le retour silencieux attend la fin de cette transition. |
Largeur, format, hauteur (CSS — --inlp-width, --inlp-ratio, --inlp-height) |
640px · 16 / 10 · auto | Le cadre suit son conteneur jusqu'à la largeur maximale. |
Flèches et arrondi (CSS — --inlp-arrow-bg, --inlp-radius) |
blanc à 20 % · 1rem | Fond des boutons et coins du cadre. |
Indice « Glisser » (HTML — .inlp-hint) |
affiché en bas, flèche qui oscille 3 fois | Supprimez le bloc sur ordinateur ou dans un petit composant ; changez le mot pour une autre langue. |
Fonds de démonstration (CSS — .inlp-demo-1 à .inlp-demo-5) |
dégradés violet à jaune | À retirer avec vos images ; préférez des classes à :nth-child, que les copies ne respecteraient pas. |
Zone de démonstration (CSS — --inlp-stage-bg, --inlp-stage-padding, --inlp-stage-min-height) |
#0a0a0f · 25px 16px · 300px | À mettre à transparent, 0, 0 dans votre page. |
Mots annoncés (HTML — data-slide, data-of, aria-label) |
diapositive · sur · Diaporama | « jour 3 sur 5 », « ville 2 sur 5 »… |
FAQ
id sont retirés des copies pour éviter les doublons, et les copies sont inert : un lien qu'elles contiennent ne peut pas être cliqué ni atteint au clavier. Pendant la fraction de seconde où une copie est visible, le clic suivant ramène de toute façon sur la vraie diapositive.
