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 :

Classe sipaui sur un parent (par exemple le <body>),
composant Navigation buttons (boutons de navigation).

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 1^er 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>
.su-carrousel-item {
    height: 100px;
    background: pink;
    text-align: center;
    font-weight: bold;
}
.su-carrousel-item.basique {
    min-width: 100px;
}
.sipaui .su-carrousel .su-carrousel-container {
    padding: 0;
    margin: 0;
}
</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 basique">1</li>
                <li class="su-carrousel-item basique">2</li>
                <li class="su-carrousel-item basique">3</li>
                <li class="su-carrousel-item basique">4</li>
                <li class="su-carrousel-item basique">5</li>
                <li class="su-carrousel-item basique">6</li>
                <li class="su-carrousel-item basique">7</li>
                <li class="su-carrousel-item basique">8</li>
                <li class="su-carrousel-item basique">9</li>
                <li class="su-carrousel-item basique">10</li>
                <li class="su-carrousel-item basique">11</li>
                <li class="su-carrousel-item basique">12</li>
                <li class="su-carrousel-item 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 ou 280 pixels comme précisé dans le doc-design). 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.

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

<style>
.su-carrousel-item {
    height: 100px;
    background: pink;
    text-align: center;
    font-weight: bold;
}
.sipaui .su-carrousel .su-carrousel-container {
    padding: 0;
    margin: 0;
}
</style>
<section>
    <div class="su-carrousel su-carrousel-items-xs snap-migrate">
        <ul class="su-carrousel-container" data-suswipe='{"sel":".su-carrousel-item","rambo":false}'>
                <li class="su-carrousel-item">1</li>
                <li class="su-carrousel-item">2</li>
                <li class="su-carrousel-item">3</li>
                <li class="su-carrousel-item">4</li>
                <li class="su-carrousel-item">5</li>
                <li class="su-carrousel-item">6</li>
                <li class="su-carrousel-item">7</li>
                <li class="su-carrousel-item">8</li>
                <li class="su-carrousel-item">9</li>
                <li class="su-carrousel-item">10</li>
                <li class="su-carrousel-item">11</li>
                <li class="su-carrousel-item">12</li>
                <li class="su-carrousel-item">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 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 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>
.su-carrousel-item {
    height: 100px;
    background: pink;
    text-align: center;
    font-weight: bold;
}
.sipaui .su-carrousel .su-carrousel-container {
    padding: 0;
    margin: 0;
}
</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">1</li>
                <li class="su-col-md-6 su-carrousel-item">2</li>
                <li class="su-col-md-6 su-carrousel-item">3</li>
                <li class="su-col-md-6 su-carrousel-item">4</li>
                <li class="su-col-md-6 su-carrousel-item">5</li>
                <li class="su-col-md-6 su-carrousel-item">6</li>
                <li class="su-col-md-6 su-carrousel-item">7</li>
                <li class="su-col-md-6 su-carrousel-item">8</li>
                <li class="su-col-md-6 su-carrousel-item">9</li>
                <li class="su-col-md-6 su-carrousel-item">10</li>
                <li class="su-col-md-6 su-carrousel-item">11</li>
                <li class="su-col-md-6 su-carrousel-item">12</li>
                <li class="su-col-md-6 su-carrousel-item">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-grid
su-carrousel-container
su-carrousel-item
su-inactive

Classes anexes

su-icon (dépendant des icônes de SipaUI [cf. Ressources/Icônes])
su-row (dépendant des Grids (grilles))
su-col-… (dépendant des Grids (grilles))
su-navigation-button (dépendant du composant Navigation buttons (boutons de navigation))
su-inside (dépendant du composant Navigation buttons (boutons de navigation))
su-left (dépendant du composant Navigation buttons (boutons de navigation))
su-right (dépendant du composant Navigation buttons (boutons de navigation))

Autres attributs

data-suswipe