article(s) dans votre panier VOIR

Intégrer un slider pleine largeur avec le framework Materialize CSS

  • Vidéo 13 sur 20
  • 2h22 de formation
  • 20 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Un slider pleine largeur
00:00 / 06:38
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
39,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Détails de la formation

Dans ce cours en ligne, l’auteur vous apprend le Framework Material Design dans Materialize CSS en insérant un slider pleine largeur. L’objectif de ce cours consiste à améliorer le graphisme du site en insérant un slider d’image sur la page web. Tout d’abord, vous devez réaliser une section avec une classe slider. Pour ce faire, vous faites le code section.slider et vous validez. Afin de créer les éléments de ce dernier, vous utilisez le code HTML pour établir les listes à puces à partir de la balise

    . Pour cela, vous saisissez le code ul.slider>li>* nombre de slide que vous souhaitez avoir. Une fois les listes créées, vous mettez des images dans chacune d’elles. Etant donné que les slider sont des éléments JavaScript, vous devez les annoncer pour qu’ils soient opérationnels. Vous passez alors dans la section JavaScript et vous saisissez le code $(« slider »).slider({full width :true}) ;. Full width :true est une option qui permet d’afficher le slider sur la totalité d’une page. Par ailleurs, pour ajouter des légendes sur l’image, vous utilisez une Div avec une classe caption. Pour faire ce procédé, vous faites le code div.caption. Pour le texte, vous utilisez la balise titre . En notant bien qu’il est possible d’ajouter un texte avec la couleur qui vous convient. Vous pouvez également ajouter une classe pour éclaircir ou assombrir le texte à partir de la classe lighten ou darken. Pour conclure, vous savez maintenant comment mettre une légende sur un slider.