Mettre en place un Slider responsive avec un effet Coverflow
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Mettre en place un Slider responsive avec un effet Coverflow

Adrien Gazaix

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Structure HTML et intégration du plugin de slider via des CDN
Leçon 2
Ajout du CSS, et configuration du plugin
Leçon 3
Personnaliser notre slider avec des options : autoplay, vitesse, pagination...
Leçon 4
Responsive, ajouter des dégradés sur les côtés et conclusion

Plan détaillé du cours

Leçon 1Structure HTML et intégration du plugin de slider via des CDN
05m12s
Leçon 2Ajout du CSS, et configuration du plugin
06m38s
Leçon 3Personnaliser notre slider avec des options : autoplay, vitesse, pagination...
09m47s
Leçon 4Responsive, ajouter des dégradés sur les côtés et conclusion
10m51s

Avis des apprenants

Détail des avis
96
Apprenants
2
Commentaires
5/5
Note moyenne
5/5
2
4/5
0
3/5
0
2/5
0
1/5
0
Dehousse Marcel
Dehousse Marcel
Publié le 21/03/2022
Merci je connaissais pas Swipper JS. Tuto très bien.
Adrien Gazaix
Adrien Gazaix
Super merci a toi 😁
Antonio Coelho
Antonio Coelho
Publié le 20/02/2022
merci trop genial joli tuto a realise
Adrien Gazaix
Adrien Gazaix
De rien, bonne continuation !

Vos questions sur le cours

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.

Attendez ! 🤗

Accédez à plus de 1389 tutos gratuits

Notre politique de protection des données