5,00

Tuto Mettre en place un Slider responsive avec un effet Coverflow avec JavaScript, HTML, CSS

5,00

  • Une formation vidéo de 32m28s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Mettre en place un Slider responsive avec un effet Coverflow

ajouter ce cours aux favoris retirer ce cours des favoris

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 !

Table des matières de cette formation JavaScript, HTML, CSS (durée : 32m28s)

    • Structure HTML et intégration du plugin de slider via des CDN 00:05:12
    • Ajout du CSS, et configuration du plugin 00:06:38
    • Personnaliser notre slider avec des options : autoplay, vitesse, pagination... 00:09:47
    • Responsive, ajouter des dégradés sur les côtés et conclusion 00:10:51



Formateur : Adrien Gazaix

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

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


non, je ne veux pas me former gratuitement

voir notre politique de protection des données