CATALOGUE Code & Data Formation XHTML/CSS Maîtriser Materialize CSS Intégration d'un Slider avec Materialize

Intégration d'un Slider avec Materialize

Un slider pleine largeur
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Maîtriser Materialize CSS
Revoir le teaser Je m'abonne
Transcription
49,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
49,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Ajout d'un slider d'images

Objectifs

L'objectif de cette vidéo est de mettre en pratique l'intégration d'un slider d'images avec le framework Materialize, et de personnaliser ses éléments tels que les légendes et l'alignement du texte.

Résumé

Découvrez comment ajouter un slider à votre site internet en utilisant Materialize pour le rendre plus attrayant.

Description

Notre site internet commence à prendre forme, mais il manque de couleur. Afin de remédier à cela, nous allons utiliser la fonctionnalité de slider proposée par Materialize. Cette leçon couvre l'intégration d'un slider d'images en plusieurs étapes : d'abord en créant une section dédiée et en ajoutant des images, puis en instanciant le slider avec du code JavaScript. Nous explorerons également comment ajouter des légendes (captions) sur les images pour un rendu plus informatif et esthétique, ainsi que des astuces pour aligner le texte à gauche, à droite ou au centre. En fin de course, vous saurez non seulement intégrer un slider sur votre site, mais également personnaliser ses éléments pour qu'ils correspondent à vos besoins visuels et ergonomiques.

Voir plus

Questions - réponses

Pourquoi le slider ne fonctionne-t-il pas après son intégration initiale ?
Le slider ne fonctionne pas car il n'a pas encore été instancié avec du code JavaScript, comme c'est le cas avec tous les éléments JavaScript de Materialize.
Comment ajouter des légendes au-dessus des images du slider ?
Pour ajouter des légendes, il faut utiliser une div avec la classe 'caption' et y insérer les titres souhaités à l'aide des balises HTML comme

ou

.
Quelle est l'option à ajouter pour que le slider occupe toute la largeur d'un container ?
Il faut ajouter l'option 'fullwidth: true' lors de l'instanciation du slider afin qu'il prenne la totalité de la largeur du container.