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 !
Table des matières de cette formation JavaScript, HTML, CSS (durée : 32m28s)
-
- Structure HTML et intégration du plugin de slider via des CDN 00:05:12
- Ajout du CSS, et configuration du plugin 00:06:38
- Personnaliser notre slider avec des options : autoplay, vitesse, pagination... 00:09:47
- Responsive, ajouter des dégradés sur les côtés et conclusion 00:10:51
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
Avis des clients
Questions sur le tuto
-
Avec quelles versions de logiciels ce tuto est-il compatible ?HTML , CSS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Les fichiers de départ ainsi que les fichiers finaux sont inclus avec le tuto.
