CATALOGUE Code & Data Formation XHTML/CSS Maîtriser Materialize CSS - Le framework pour le Material Design

Intégration d'un Slider avec Materialize

Retour à la formation
Chapitre 2 Leçon 6
Précédent
Suivant

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

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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.

Prérequis pour cette leçon

Pour suivre cette vidéo, les participants doivent avoir des connaissances de base en HTML, CSS, et JavaScript.

Métiers concernés

Les développeurs web et web designers utilisent souvent des sliders pour améliorer la présentation visuelle de leurs projets.

Alternatives et ressources

Des alternatives à Materialize pour l'ajout de sliders incluent Bootstrap, Slick et Swiper.

Questions & Réponses

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

.
Il faut ajouter l'option 'fullwidth: true' lors de l'instanciation du slider afin qu'il prenne la totalité de la largeur du container.