Dans ce tuto Javascript en vidéo, nous allons voir ensemble comment créer 2 Sliders liés ensemble et qui fonctionneront avec une seule navigation.
Nous utiliserons pour cela un plugin Javascript qui se nomme SwiperJS.
Les 3 étapes de ce tuto Sliders liés en JS
- Poser la structure HTML en utilisant la nomenclature des classes fournie avec le plugin SwiperJS + Ajouter les CDN du plugin
- Rajouter le style CSS pour gérer le placement, les alignements de nos éléments ainsi que le redimensionnement automatique des images avec la taille du navigateur
- Et pour terminer, nous ajouterons le code javascript pour faire fonctionner les 2 sliders ensemble
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 (durée : 26m53s)
-
- Mise en place de la structure HTML 00:07:06
- Ajouter le style grâce au CSS 00:09:24
- Finaliser le slider avec le plugin SwiperJS 00:10:23
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
-
Tuto très sympa, simple et bien expliqué comme toujours avec Adrien, n'hésitez pas a suivre ce tuto ou d'autres du même auteur sur cette petite librairie très sympa pour réaliser des sliders. Peut être un prochain tuto pour nous apprendre a gérer deux sliders sur un click avec le onslideChange ;-) ? Merci pour la qualité de vos prestations.
-
Que contient le fichier source ?Les fichiers de départ ainsi que le slider final obtenu à la fin du tuto.
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissé