Dans ce tuto Javascript en vidéo, nous allons voir ensemble comment mettre en place un Slider responsive mobile/tablette avec un effet Coverflow.
Nous utiliserons pour cela un plugin Javascript dédié à la création de sliders.
Celui-ci nous aidera à créer rapidement l'effet de coverflow recherché.

Au programme de ce tuto Slider responsive avec un effet Coverflow

• Mise en place de la structure HTML avec les images fournies
• Intégration du plugin Javascript à l'aide des CDN
• Contraindre la taille des images grâce à la propriété object-fit
• Faire fonctionner le slider avec l'effet coverflow
• Ajouter un système de pagination dynamique
• Changer la vitesse de défilement
• Ajouter un "autoplay" pour lancer le slider automatiquement au chargement de la page
• Tester le slider sur mobile & tablette
• Améliorer les côtés du slider avec des dégradés blanc/transparent pour que la disparation des images soit plus esthétique
• Découverte de la propriété "pointer-events" afin d'annuler tout évènement au clic sur ces dégradés
• Désactiver si besoin cet effet de dégradé sur mobile avec des media queries

Je vous invite à regarder l'extrait vidéo pour vous rendre compte du résultat final.
Les fichiers sources contenant les fichiers de départ ainsi que les fichiers finaux sont inclus avec le tuto.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrez des difficultés pendant ou après le visionnage de la vidéo.
Bon tuto !