Vertical Slider
Carrousel vertical : la piste monte ou descend d'une diapositive à la fois, avec une flèche en haut, une en bas, les touches ↑ ↓ et le glisser vertical.
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 piste .vtsl-track est une colonne (flex-direction: column) : les diapositives sont posées les unes sous les autres, chacune haute de 100 % du cadre. Avancer, c'est appliquer translateY(-100 %), -200 %… ; la transition de 0,5 s fait monter l'image suivante par le bas. Reculer la fait redescendre. Après la dernière, le bouton du bas ramène à la première en faisant redescendre toute la piste.
Les commandes sont placées sur l'axe : le bouton .vtsl-prev en haut au centre, .vtsl-next en bas, avec les chevrons tournés de 90° (˄ et ˅). Au clavier, ↑ et ↓ font la même chose quand le focus est dans le carrousel. Au doigt ou à la souris, un glisser vertical de plus de 50 px change d'image : vers le haut pour la suivante, vers le bas pour la précédente.
Pour que ce glisser fonctionne sur mobile, la piste porte touch-action: pan-x : un mouvement vertical commencé sur le carrousel ne fait pas défiler la page. Placez-le donc là où l'utilisateur peut défiler ailleurs (un écran de téléphone dédié, une carte de taille raisonnable), pas sur toute la hauteur d'une page longue.
Les photos se mettent en <img> dans les diapositives (recadrées en object-fit: cover). Chaque .vtsl-carousel fonctionne seul ; le script ne déclare rien sur window et ne se branche pas deux fois sur un cadre marqué data-vtsl-ready.
Accessibilité
- Rôles : le cadre est un
role="region"décrit comme « carrousel » ; chaque diapositive est un groupe « diapositive » nommé « 1 sur 5 ». Pour des créneaux ou des étapes, changez le mot avecdata-slide(« créneau », « étape »). - Boutons nommés : « Diapositive précédente » en haut, « Diapositive suivante » en bas ; ces libellés se réécrivent sur les boutons (« Créneau plus tôt »…).
- Clavier : ↑ et ↓ dans le carrousel, Tab et Entrée sur les flèches ; les diapositives hors cadre sont
inertetaria-hidden. - Annonce : une zone
aria-live="polite"cachée lit « diapositive 3 sur 5 » après chaque changement. - Mouvement réduit : l'image change sans monter ni descendre sous
prefers-reduced-motion: reduce; flèches, touches et doigt restent actifs.
Compatibilité navigateur
Environ 3,6 Ko de JavaScript. Contrôlé le 08/11/2026 dans Chromium, Firefox et WebKit via Playwright : copie 2 pilotée sans effet sur la copie 1, script en double sans erreur, Entrée sur la flèche puis touche ↓, glisser vertical au doigt à 390 px sans défilement de la page (Chromium) et à la souris, mouvement réduit. Versions planchers lues dans @mdn/browser-compat-data 8.1.8 ; inert est la plus récente des fonctions employées.
Plus ancien que inert : le carrousel fonctionne, mais le Tab peut entrer dans une diapositive cachée qui contient un lien. Safari 14 ignore aspect-ratio : précisez --vtsl-height. Sans JavaScript, la première diapositive reste en place.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0168-root">
<div class="vtsl-carousel" role="region" aria-roledescription="carrousel" aria-label="Diaporama" data-slide="diapositive" data-of="sur">
<div class="vtsl-track">
<div class="vtsl-slide"><span class="vtsl-caption">Slide 1</span></div>
<div class="vtsl-slide"><span class="vtsl-caption">Slide 2</span></div>
<!-- … autres div.vtsl-slide, empilées de haut en bas -->
</div>
<button type="button" class="vtsl-arrow vtsl-prev" aria-label="Diapositive précédente"><svg>…</svg></button>
<button type="button" class="vtsl-arrow vtsl-next" aria-label="Diapositive suivante"><svg>…</svg></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 |
|---|---|---|
Hauteur (CSS — --vtsl-height sur .fx-0168-root) |
auto (calculée par le format) | Pour un composant : 150px ; pour remplir un écran : 100%. |
Largeur maximale et format (CSS — --vtsl-width, --vtsl-ratio) |
640px · 16 / 10 | Un format portrait (9 / 16) convient à des photos de mode ou à un fil de type « stories ». |
Durée (CSS — --vtsl-duration) |
0.5s | Temps de montée ou de descente de la piste. |
Flèches (CSS — --vtsl-arrow-bg) |
blanc à 20 % | Une couleur pleine sur un fond clair ; leur position se change via .vtsl-prev (haut) et .vtsl-next (bas). |
Arrondi (CSS — --vtsl-radius) |
1rem | Accepte plusieurs valeurs (22px 22px 0 0). |
Zone autour (CSS — --vtsl-stage-bg, --vtsl-stage-padding, --vtsl-stage-min-height) |
#0a0a0f · 25px 16px · 300px | Cadre sombre de la démo, à remettre à transparent, 0, 0. |
Mots lus (HTML — data-slide, data-of, aria-label) |
diapositive · sur · Diaporama | « créneau 2 sur 5 », « étape 3 sur 4 »… selon le contenu. |
FAQ
touch-action: pan-x y réserve le mouvement vertical au carrousel. Hors du cadre, la page défile normalement. Gardez donc une hauteur raisonnable ou un écran dédié ; pour un carrousel qui ne doit pas capter le doigt, retirez cette ligne et le glisser vertical ne marchera plus que pour la souris.
