01 / 05
Une image plein écran
02 / 05
Qui défile au scroll
03 / 05
Au rythme du lecteur
04 / 05
Compteur synchronisé
05 / 05
Et barre de progression
01 / 05
↓ Scrollez pour faire défiler · 5 images
/00 · Brief
Le carrousel scroll-jacké épingle une section en plein écran pendant que les images défilent horizontalement, au rythme du scroll vertical. Idéal pour un diaporama séquentiel qui raconte une histoire, comme dans les dossiers Ghana ou Ukraine. Pas d'autre librairie que le socle commun (Bootstrap 5.3 et le thème de la marque) : le JavaScript reste vanilla.
/01 · Intégration
La structure .ll-scroll-carousel avec ses slides, le compteur et la barre.
carousel-scroll.css et carousel-scroll.js dans vos dossiers /css et /js.
Glissez vos visuels à la place des images de démo. Le script gère le reste.
/02 · Personnalisation
Le nombre de slides est automatique. Couleur du compteur, marges et police passent par les variables
--sc-accent, --sc-pad, --sc-font-title. Sur mobile et en prefers-reduced-motion,
le composant bascule en scroll-snap horizontal natif : le doigt ne pardonne pas le scroll-hijacking.
/03 · Sous le capot
La hauteur de la section est calculée en JS pour autoriser N écrans de défilement. Le suivi du scroll passe par
requestAnimationFrame, la translation par translate3d pour rester sur le GPU. Compteur et progression
sont synchronisés sur la même boucle.
/04 · Dans le zip