Carrousel en plein écran

Guide avec exercice

À propos de l'élément de contenu « Carrousel plein écran »

Avec « Carrousel plein écran », vous pouvez présenter plusieurs images sous forme de carrousel animé avec des transitions, sur toute la largeur de la page.

TYPO3 propose une méthode de travail à cet effet :

Utilisation :

L'élément de contenu « Carrousel plein écran » est généralement placé au début d'un site web.

L'utilisation du carrousel plein écran est particulièrement indiquée lorsque

  • l'on souhaite créer un effet émotionnel et évocateur.
  • une présentation représentative est souhaitée, par exemple lors de la présentation d’un projet.
  • l'on souhaite montrerdes images particulièrement attrayantes;
  • il s'agit d'une page d'accueil ou d'une page d'information.

Cet élément doit être utilisé avec parcimonie afin de ne pas en atténuer l'impact.

À noter :

  • Vous devez déjà savoir comment insérer des images dans la liste des fichiers. →Instructions pour le téléchargement de fichiers
  • Évitez d'utiliser des images de tailles différentes, car toutes les images seront redimensionnées à la même taille.
  • Le texte figurant dans l'image doit être indiqué dans le texte alternatif.
  • Il n'est pas recommandé d'utiliser plus de six images.

Ce guide vous explique tout d'abord comment intégrer l'élément de contenu « Carrousel plein écran ».

Voici à quoi cela ressemble

Aperçu en direct de l'élément de contenu


Étape par étape

Guide illustré

Élément de contenu « Carrousel » en plein écran

Étape 1 : Créer un nouvel élément de contenu

Sélectionnez « Créer un nouveau contenu ».

Vous pouvez accéder à l'élément de contenu « Carrousel plein écran » de deux façons : via « Médias » ou via « Animé » ou « Interactif ».

Étape 2 : Ajouter des éléments au carrousel

Sous l'onglet « Élément de carrousel », sélectionnez l'option « Créer un nouvel élément ».

Vous devez maintenant donner un nom à l'élément « Carrousel » et créer une relation ( sélectionner une image).

Suivez les instructions de la section « Télécharger un fichier » si vous n'avez pas encore téléchargé d'images.

Si vos images ne comportent pas de texte alternatif , vous devez en ajouter un ici.

Étape 3 : Autres options et résultat

Sous l'onglet « Options du carrousel », vous disposez désormais d'autres possibilités de personnalisation, qui sont purement facultatives.

  • Combien d'images doivent être affichées simultanément ? → Vous avez le choix entre une et trois images affichées simultanément.
  • Activer la lecture automatique → Changement automatique entre les images.
  • Intervalle en ms → La vitesse de changement d'image en millisecondes.

Voici à quoi pourrait ressembler un résultat possible

Autoformation à TYPO3 pour débutants, 2e partie

Exercice

Accédez à l'environnement de test.

  1. Créez l'élément de contenu « Carrousel plein écran » et insérez-y vos propres images.
  2. Affichez maintenant trois images à la fois et configurez le changement automatique des images.

Accéder à l'espace de test

Continuons :

 

Retour à l'aperçuRubrique suivante