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 !
Avis des apprenants