0 C'est gratuit

Tuto Comment lier 2 Sliders ensemble avec le plugin SwiperJS avec JavaScript

0 C'est gratuit

  • Une formation vidéo de 26m53s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Comment lier 2 Sliders ensemble avec le plugin SwiperJS

ajouter ce cours aux favoris retirer ce cours des favoris

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



Formateur : Adrien Gazaix

Adrien Gazaix a publié 201 tutoriels et obtenu une note moyenne de 4,8/5 sur 63 034 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de fred64 laissé 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.
    "De rien merci a toi pour la note et le commentaire ultra positif 😁 "

  • 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
Parcours Developpeur Front End
accédez à plus de 1449 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données