haut

Carrousel (Carrousel)

Le carrousel est un bloc interactif affichant une liste de contenus (articles, photos…). Ceux-ci sont en partie masqués (hors de la zone d’affichage) et le composant permet de faire défiler horizontalement ces différents éléments. Le carrousel inclut donc la prise en charge des commandes précédents/suivants.

Usage

Le carrousel permet de naviguer dans une série de contenus de manière séquentielle, en passant à la précédente/suivante grâce :

  • « au swipe » pour les écrans tactiles
  • « au clic » sur les boutons flèches pour les écrans tablette et desktop.

Spécifications

Les boutons précédents/suivants apparaissent uniquement sur les versions tablette et desktop et lorsqu’il y a des éléments de la série cachés.

Il existe 2 types de carrousel :

  • Carrousel fixe
  • Carrousel grille

Carrousel fixe

Le carrousel fixe se compose de différents items d’une largeur définie, peu importe la largeur de l’écran.
On ne maîtrise donc pas le nombre d’éléments, ni l’endroit où ils sont coupés.

Carrousel grille

Pour les versions tablette et desktop les différents items se calent sur la grille. On maîtrise ainsi le nombre d’éléments, et l’on s’assure qu’aucun item ne soit coupé. Les boutons flèches (précédents/suivants) apparaissent uniquement lorsque d’autres items se trouvent au-delà de ceux déjà affichés.

Bonnes pratiques

  • Les carrousels sont particulièrement utiles pour des interfaces mobile first car ils réduisent les listes volumineuses dans de petits espaces.
  • Cacher un contenu via un carrousel n’améliore pas nécessairement l’expérience utilisateur. En effet, le carrousel demande un nombre d’interactions supplémentaire.
  • N’utilisez pas de carrousel lorsque tout le contenu doit être vu sur une même page.

Style & code

Dépendances :

Carrousel basique

Ce composant s’appuie sur le JS du carrousel.

Afin de créer un carrousel basique, il faut ajouter les classes su-carrousel et snap-migrate sur le parent de la liste, la classe su-carrousel-container sur la liste elle-même, ainsi que la classe su-carrousel-item sur les éléments du carrousel.

En plus de ces classes, il faut ajouter le déclencheur JS data-suswipe avec ces paramètres :

  • le sel qui pointe sur les .su-carrousel-item,
  • rambo à false, ou à true, en fonction de vos besoins. Ce qui donne : data-suswipe='{"sel":".su-carrousel-item","rambo":false}'.

Il faut aussi ajouter les 2 Navigation buttons (boutons de navigation) pour desktop, la classe su-inactive sur le 1er bouton, ainsi que les déclencheurs JS data-suswipeprev et data-suswipenext :

<button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
<button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>

N. B. – Les flèches sont centrées verticalement dans le conteneur. Toutefois, en bonne pratique il est conseillé de les centrer sur les photos des éléments du carrousel. Ce besoin n’étant pas automatisable il vous faudra surcharger le style top des .su-navigation-button pour y parvenir.

<style>
.exemple {
    height: 100px;
    background: pink;
    text-align: center;
    font-weight: bold;
}
.exemple.basique {
    min-width: 100px;
}
</style>
<section>
    <div class="su-carrousel snap-migrate">
        <ul class="su-carrousel-container" data-suswipe='{"sel":".su-carrousel-item","rambo":false}'>
                <li class="su-carrousel-item exemple basique">1</li>
                <li class="su-carrousel-item exemple basique">2</li>
                <li class="su-carrousel-item exemple basique">3</li>
                <li class="su-carrousel-item exemple basique">4</li>
                <li class="su-carrousel-item exemple basique">5</li>
                <li class="su-carrousel-item exemple basique">6</li>
                <li class="su-carrousel-item exemple basique">7</li>
                <li class="su-carrousel-item exemple basique">8</li>
                <li class="su-carrousel-item exemple basique">9</li>
                <li class="su-carrousel-item exemple basique">10</li>
                <li class="su-carrousel-item exemple basique">11</li>
                <li class="su-carrousel-item exemple basique">12</li>
                <li class="su-carrousel-item exemple basique">13</li>
        </ul>
        <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
        <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
    </div>
</section>

Carrousel fixe

Les carrousels fixes imposent une largeur figée pour chacun de ces enfants (140, 190, 220, 260, 280 ou 300 pixels). Ces largeurs ont été étudiées pour répondre idéalement à la plupart des cas. Pour pouvoir les appliquer, il faut ajouter une classe su-carrousel-items-… à côté de su-carrousel, où … vaut xs, s, m, l, xl ou xxl.

Dans cet exemple nous forçons la largeur à 140px avec la classe su-carrousel-items-xs.

<style>
.exemple {
    height: 100px;
    background: pink;
    text-align: center;
    font-weight: bold;
}
</style>
<section>
    <div class="su-carrousel su-carrousel-items-s snap-migrate">
        <ul class="su-carrousel-container" data-suswipe='{"sel":".su-carrousel-item","rambo":false}'>
                <li class="su-carrousel-item exemple">1</li>
                <li class="su-carrousel-item exemple">2</li>
                <li class="su-carrousel-item exemple">3</li>
                <li class="su-carrousel-item exemple">4</li>
                <li class="su-carrousel-item exemple">5</li>
                <li class="su-carrousel-item exemple">6</li>
                <li class="su-carrousel-item exemple">7</li>
        </ul>
        <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
        <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
    </div>
</section>

Carrousel grille

Le carrousel grille s’appuie sur la grille SipaUI, il faut donc ajouter les classes standards de la grille, à savoir su-row sur le conteneur et su-col-lg-… sur les fils de celui-ci. Toutefois, pour que ces fils aient une taille fixe en mobile, comme prévu par le doc-design, il faut aussi ajouter la classe su-carrousel-items-… des carrousels fixes pour donner la largeur attendue. Enfin, il faut aussi ajouter la classe su-carrousel-grid, toujours à côté du su-carrousel, pour que la grille SipaUI reprenne ses droit en tablette / desktop.

Dans cet exemple, les éléments du carrousel font 140px de large en mobile et ¼ du conteneur en tablette / desktop.

<style>
.exemple {
    height: 100px;
    background: pink;
    text-align: center;
    font-weight: bold;
}
</style>
<section>
    <div class="su-carrousel su-carrousel-grid su-carrousel-items-xs snap-migrate">
        <ul class="su-row su-carrousel-container" data-suswipe='{"sel":".su-carrousel-item","rambo":false}'>
                <li class="su-col-md-6 su-carrousel-item exemple">1</li>
                <li class="su-col-md-6 su-carrousel-item exemple">2</li>
                <li class="su-col-md-6 su-carrousel-item exemple">3</li>
                <li class="su-col-md-6 su-carrousel-item exemple">4</li>
                <li class="su-col-md-6 su-carrousel-item exemple">5</li>
                <li class="su-col-md-6 su-carrousel-item exemple">6</li>
                <li class="su-col-md-6 su-carrousel-item exemple">7</li>
                <li class="su-col-md-6 su-carrousel-item exemple">8</li>
                <li class="su-col-md-6 su-carrousel-item exemple">9</li>
                <li class="su-col-md-6 su-carrousel-item exemple">10</li>
                <li class="su-col-md-6 su-carrousel-item exemple">11</li>
                <li class="su-col-md-6 su-carrousel-item exemple">12</li>
                <li class="su-col-md-6 su-carrousel-item exemple">13</li>
        </ul>
        <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
        <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
    </div>
</section>

Effet d’escalier

Par défaut, les éléments enfants de su-carrousel-container font tous la même hauteur, mais pas les enfants de ces enfants. Par conséquent, 2 cas de figure peuvent se présenter :

  1. Vous utilisez le code sémantique normal avec vos objets dans une suite de <li class="su-carrousel-item"> dans un <ul class="su-carrousel-container>, dans ce cas vos objets auront des hauteurs variables, en fonction de leur contenu, ce qui créera un « effet d’escalier ». Si c'est un souci graphiquement, cf. plus bas.
  2. Vous utilisez un code moins sémantique avec vos objets portant directement la classe su-carrousel-item dans un <div class="su-carrousel-container, et dans ce cas vos objets auront tous la même hauteur. Là aussi, si c'est un souci graphiquement, cf. plus bas.

Illustration du cas 1

<style>
.exemple {
    background: pink;
}
</style>
<section>
    <div class="su-carrousel su-carrousel-grid su-carrousel-items-xs snap-migrate">
        <ul class="su-row su-carrousel-container" data-suswipe='{"sel":".su-carrousel-item","rambo":false}'>
                <li class="su-col-md-9 su-carrousel-item">
                    <div class="exemple">Logoden biniou degemer.</div>
                </li>
                <li class="su-col-md-9 su-carrousel-item">
                    <div class="exemple">Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern.</div>
                </li>
                <li class="su-col-md-9 su-carrousel-item">
                    <div class="exemple">Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale. Planvour nemet deuet kazetenn war soubañ dirak.</div>
                </li>
                <li class="su-col-md-9 su-carrousel-item">
                    <div class="exemple">Logoden biniou degemer mat an penn ar bed pegeit.</div>
                </li>
        </ul>
        <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
        <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
    </div>
</section>

Illustration du cas 2

<style>
.exemple {
    background: pink;
}
</style>
<section>
    <div class="su-carrousel su-carrousel-grid su-carrousel-items-xs snap-migrate">
        <div class="su-row su-carrousel-container" data-suswipe='{"sel":".su-carrousel-item","rambo":false}'>
            <div class="su-col-md-9 su-carrousel-item exemple">Logoden biniou degemer.</div>
            <div class="su-col-md-9 su-carrousel-item exemple">Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern.</div>
            <div class="su-col-md-9 su-carrousel-item exemple">Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale. Planvour nemet deuet kazetenn war soubañ dirak.</div>
            <div class="su-col-md-9 su-carrousel-item exemple">Logoden biniou degemer mat an penn ar bed pegeit.</div>
        </div>
        <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
        <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
    </div>
</section>

Pour contrer ces comportement en cas d’inadéquation avec votre besoin, vous pouvez utiliser les classes su-equal, su-align-top, su-align-center et su-align-bottom à côté du su-carrousel.

Illustration du cas 1 avec su-equal

<style>
.exemple {
    background: pink;
}
</style>
<section>
    <div class="su-carrousel su-carrousel-grid su-carrousel-items-xs su-equal snap-migrate">
        <ul class="su-row su-carrousel-container" data-suswipe='{"sel":".su-carrousel-item","rambo":false}'>
                <li class="su-col-md-9 su-carrousel-item">
                    <div class="exemple">Logoden biniou degemer.</div>
                </li>
                <li class="su-col-md-9 su-carrousel-item">
                    <div class="exemple">Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern.</div>
                </li>
                <li class="su-col-md-9 su-carrousel-item">
                    <div class="exemple">Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale. Planvour nemet deuet kazetenn war soubañ dirak.</div>
                </li>
                <li class="su-col-md-9 su-carrousel-item">
                    <div class="exemple">Logoden biniou degemer mat an penn ar bed pegeit.</div>
                </li>
        </ul>
        <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
        <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
    </div>
</section>

Illustration du cas 2 avec su-align-top

<style>
.exemple {
    background: pink;
}
</style>
<section>
    <div class="su-carrousel su-carrousel-grid su-carrousel-items-xs su-align-top snap-migrate">
        <div class="su-row su-carrousel-container" data-suswipe='{"sel":".su-carrousel-item","rambo":false}'>
            <div class="su-col-md-9 su-carrousel-item exemple">Logoden biniou degemer.</div>
            <div class="su-col-md-9 su-carrousel-item exemple">Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern.</div>
            <div class="su-col-md-9 su-carrousel-item exemple">Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale. Planvour nemet deuet kazetenn war soubañ dirak.</div>
            <div class="su-col-md-9 su-carrousel-item exemple">Logoden biniou degemer mat an penn ar bed pegeit.</div>
        </div>
        <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
        <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
    </div>
</section>

Carrousel étiré

Un carrousel est prévu pour être utilisé bord à bord du conteneur : le 1er et le dernier élément du carrousel touchent les bords gauche ou droit quand on est à une extrémité. Toutefois, dans certains cas où ce carrousel est utilisé dans un conteneur avec padding, p. ex. un bloc avec un fond différent du fond de la page, il peut être utile de gérer des marges pour que le carrousel ne donne pas l’impression d’avoir une « frontière invisible » avant le bord de ce conteneur. Pour gérer ce type de cas, utilisez les classes su-stretch-to-bloc-m ou su-stretch-to-bloc-l à côté ou sur un parent de su-carousel.

N. B. : -m et -l font référence à la taille de padding à résorber (20 ou 30px) pour atteindre les bords du bloc. SipaUI ne propose pour l’instant que ces tailles.

En avril 2025, sous Safari 18.4 iOS ou macOS, un bug empêche la prise en compte de la marge à droite du dernier élément, qui sert à simuler le padding du bloc.

<style>
.boite {
    background: var(--couleur-projecteur-1);
}
.exemple {
    height: 100px;
    background: pink;
    text-align: center;
    font-weight: bold;
}
.exemple.basique {
    min-width: 100px;
}
</style>
<section class="boite su-standard-radius su-standard-padding-large su-negative">
    <h2 class="su-margin-bottom-m">Titre</h2>
    <div class="su-carrousel su-stretch-to-bloc-l snap-migrate">
        <ul class="su-carrousel-container" data-suswipe='{"sel":".su-carrousel-item","rambo":false}'>
                <li class="su-carrousel-item exemple basique">1</li>
                <li class="su-carrousel-item exemple basique">2</li>
                <li class="su-carrousel-item exemple basique">3</li>
                <li class="su-carrousel-item exemple basique">4</li>
                <li class="su-carrousel-item exemple basique">5</li>
                <li class="su-carrousel-item exemple basique">6</li>
                <li class="su-carrousel-item exemple basique">7</li>
                <li class="su-carrousel-item exemple basique">8</li>
                <li class="su-carrousel-item exemple basique">9</li>
                <li class="su-carrousel-item exemple basique">10</li>
                <li class="su-carrousel-item exemple basique">11</li>
                <li class="su-carrousel-item exemple basique">12</li>
                <li class="su-carrousel-item exemple basique">13</li>
        </ul>
        <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
        <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
    </div>
</section>

Liste des classes disponibles

  • su-carrousel
  • snap-migrate
  • su-carrousel-items-xs
  • su-carrousel-items-s
  • su-carrousel-items-m
  • su-carrousel-items-l
  • su-carrousel-items-xl
  • su-carrousel-items-xxl
  • su-carrousel-grid
  • su-carrousel-container
  • su-carrousel-item
  • su-inactive
  • su-equal
  • su-align-top
  • su-align-center
  • su-align-bottom
  • su-stretch-to-bloc-m
  • su-stretch-to-bloc-l

Classes annexes

Autres attributs

  • data-suswipe

Le code a bien été copié !