Comment lier 2 Sliders ensemble avec le plugin SwiperJS
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Comment lier 2 Sliders ensemble avec le plugin SwiperJS

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 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 !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place de la structure HTML
Leçon 2
Ajouter le style grâce au CSS
Leçon 3
Finaliser le slider avec le plugin SwiperJS

Plan détaillé du cours

Leçon 1Mise en place de la structure HTML
07m06s
Leçon 2Ajouter le style grâce au CSS
09m24s
Leçon 3Finaliser le slider avec le plugin SwiperJS
10m23s

Avis des apprenants

Détail des avis
15
Apprenants
1
Commentaire
5/5
Note moyenne
5/5
1
4/5
0
3/5
0
2/5
0
1/5
0
Frederic Guerra
Frederic Guerra
Publié le 22/06/2022
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.
Adrien Gazaix
Adrien Gazaix
De rien merci a toi pour la note et le commentaire ultra positif 😁

Vos questions sur le cours

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

Attendez ! 🤗

Accédez à plus de 1364 tutos gratuits

Notre politique de protection des données