Diaporama horizontal

Temps de lecture : 2 minutes

Une mise en page conçue pour une expérience de défilement horizontal où chaque div remplit un écran, et où l’utilisateur est invité à faire défiler vers la droite ou la gauche pour passer d’un écran à l’autre. Cela crée un effet de diaporama ou de présentation de type « carrousel ».

Un carrousel sur une page web, souvent appelé « slider », est un élément de design interactif qui permet de présenter plusieurs contenus (comme des images, des textes, ou des vidéos) dans un espace limité. Les utilisateurs peuvent généralement naviguer entre les différents éléments du carrousel soit manuellement, soit en utilisant des contrôles tels que des flèches ou des points de navigation.

Ici, à des fins de compréhension, le carroussel n’est pas interactif par un menu mais seulement par le scroll ou l’ascenseur horizontal.

Un carrousel sur une page web, souvent appelé « slider », est un élément de design interactif qui permet de présenter plusieurs contenus (comme des images, des textes, ou des vidéos) dans un espace limité.

Les concepteurs UI/UX utilisent ces techniques pour améliorer l’engagement des utilisateurs et créer des expériences web mémorables. Cela demande une bonne compréhension de la conception graphique, du développement front-end, et des principes d’interaction utilisateur pour être efficacement mise en œuvre.

Préparer les écrans pour un slider

Ce code crée une mise en page web avec trois écrans (sections) disposés horizontalement, chacun occupant toute la largeur de la fenêtre de visualisation. Voici comment cela est réalisé :

See the Pen Scroll CSS 02 by Jerome Mercier (@jmercier) on CodePen.0

Le code commenté par l’IA

La structure HTML comprend un div parent avec l’identifiant container.
À l’intérieur de ce div, il y a trois div enfants, chacun contenant un paragraphe (p) avec le texte « Screen 1 », « Screen 2 », ou « Screen 3 » suivi d’un span avec une instruction de défilement (par exemple, « scroll vers la droite >> »)…

CSS

• Le CSS commence par importer la police Roboto depuis Google Fonts.
• Le body est stylisé sans marge ni padding.
• #container :
• A une largeur de 300vw, ce qui signifie qu’il s’étend sur trois fois la largeur de la fenêtre de visualisation, permettant de placer chaque div enfant côte à côte sur une seule ligne.
• Utilise Flexbox (display: flex) avec une direction de ligne (flex-direction: row) et un alignement central (align-items: center).
• Le fond est défini à #ebeddd (un gris clair).
• Chaque div enfant dans #container :
• Occupe la pleine largeur (100vw) et hauteur (100vh) de la fenêtre de visualisation.
• Contient du texte centré avec une grande taille de police (20vh).
• Est stylisé avec Flexbox pour centrer le contenu.
• Les div enfants impairs (nth-child(odd)) ont un fond rouge (#FF0000) avec un texte en blanc.
• Le span à l’intérieur des p est stylisé avec un fond noir et un texte blanc.

Ressources