CARROUSEL
Attention, cette page ne décrit que le fonctionnement du composant javascript, le composant complet (avec design) est présenté dans la partie « Composants »…
Le composant JS CARROUSEL permet de faire défiler une série d’éléments. Typiquement pour faire une visionneuse d’images. Il fonctionne soit lorsqu’on swipe sur un device touch (la majorité des usages) soit via l’actionnement de boutons précédents/suivants pour les navigateurs sur ordinateur.
N. B. – Ce composant est donc initialement prévu pour faire défiler une suite d’éléments de largeur identique. Pour un carrousel d’éléments de largeur variable, il y a un paramètre spécifique.
Syntaxe
Comme tout déclencheur JS de SipaUI il est préfixé par data-su. À ce déclencheur on peut ajouter des paramètres -cf. ci-dessous-. Attention, la syntaxe impose l’imbrication de guillemets : 2 pour encadrer la valeur du data-suswipe et d’autres pour encadrer les paramètres et leur valeur. Ces derniers doivent par ailleurs respecter la syntaxe JSON {"parametre":"valeur"}. Par conséquent, il faut choisir des '' pour encadrer le contenu de swipe. Ce qui donne : data-suswipe='{"paramètre":"valeur"}'.
Paramètres
sel: sélecteur des éléments enfants de l’élément portantdata-suswipe. Ils représentent chaque « diapo ».navSel: sélecteur vers la liste de puces permettant d’intercepter le click sur une puce et rendre actif l’élément correspondant.defile: permet de faire défiler automatiquement les diapos (nombre de millisecondes).stopOnItemClick: permet de stopper le défilement au clic sur une diapo.
rambo: permet de garder une flèche active lorsqu’on est à un des bouts du carrousel, flèche dont le déclenchement entrainera le "rembobinage" (soit au début, soit à la fin).mobileOnly: permet de limiter l’exécution du composant aux navigateurs dont la largeur de l’écran est inférieure à 980.halfSwipe: surcharge le comportement par défaut. Utile pour un carrousel d’éléments de tailles variables.
Classes supplémentaires
Classes à ajouter
Classes CSS à mettre sur le parent de l’élément possédant l’attribut data-suswipe :
su-carrousel: permet de d’identifier le composant.snap-migrate: permet de déclencher le composant.
Classe CSS à mettre sur l’élément possédant l’attribut data-suswipe :
su-carrousel-container: permet de définir le conteneur dans lequel les éléments sont déplaçables.
Classe CSS à mettre sur les éléments à déplacer pour un carrousel avec des « diapos » à largeur fixe :
su-carrousel-item: permet de définir les « diapos » dans lequel les éléments sont déplaçables.
Classe CSS à mettre sur les boutons de déplacement en desktop :
su-navigation-button,su-insideousu-outside(en fonction du type de carrousel) etsu-leftousu-right.
Classes ajoutées par le JS
Classe CSS générée automatiquement sur l’élément de navigation courant (exemple: la 8e puce lorsqu’on est en train de voir la 8e diapo); permet de styler son état actif :
su-active
Classe CSS générée automatiquement sur l’élément de navigation précédent et suivant (exemple: le bouton suivant quand on est à la fin d’un diapo); permet de styler son état inactif :
su-inactive
Pour des raisons de rétro-compatibilité, ces classes n’ont pu être préfixées su-…
Attributs supplémentaires
Attributs HTML à mettre directement sur les éléments de navigation précédent et suivant.
data-suswipenext: le bouton suivantdata-suswipeprev: le bouton précédent
CSS
Ce composant nécessite des CSS spécifiques pour fonctionner. Ces CSS sont portées par les classes ci-dessus grâce au composant Carrousel.
Exemples
Démo 0 : cas basique
Permet d’animer au swipe ou au clic une liste de photos. Dispose de boutons précédent/suivant. Autorise le rembobinage vers l’avant ou vers l’arrière au clic sur un bouton de navigation alors qu’on est sur la première ou la dernière diapo.
<div class="demo0">
<div class="demoswipe-masque su-carrousel snap-migrate">
<div class="su-carrousel-container" data-suswipe='{"rambo":true,"sel":".su-carrousel-item"}'>
<img class="su-carrousel-item" src="http://placedog.net/500/340?r">
<img class="su-carrousel-item" src="http://placedog.net/500/340/g?r">
<img class="su-carrousel-item" src="http://placedog.net/501/340?r">
<img class="su-carrousel-item" src="http://placedog.net/501/340/s?r">
<img class="su-carrousel-item" src="http://placedog.net/501/340/g?r">
<img class="su-carrousel-item" src="http://placedog.net/502/340?r">
<img class="su-carrousel-item" src="http://placedog.net/502/340/g?r">
<img class="su-carrousel-item" src="http://placedog.net/502/340/s?r">
<img class="su-carrousel-item" src="http://placedog.net/503/340?r">
<img class="su-carrousel-item" src="http://placedog.net/503/340/g?r">
</div>
<button class="su-navigation-button su-inside su-left" 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>
</div>
Démo 1 : cas avec une diapo à la fois
Fait uniquement en HTML et CSS, le paramétrage ne change que pour l’ajout facultatif de puce de navigation. Le conteneur global a la taille de n’afficher entièrement qu’une diapo.
<style>
.demo1 {
width: 300px;
}
.nav {
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
.puce {
display: inline-block;
font-size: 30px;
color: lightgray;
}
.puce:hover {
cursor: pointer;
color: red;
}
.puce.su-active {
color: black;
cursor: auto;
}
</style>
<div class="demo1">
<div class=" demoswipe-masque su-carrousel snap-migrate">
<div class="su-carrousel-container" data-suswipe='{"rambo":true,"sel":".su-carrousel-item","navSel":".demo1 .nav .puce"}'>
<img class="su-carrousel-item" src="http://placedog.net/300/360?r">
<img class="su-carrousel-item" src="http://placedog.net/300/360/g?r">
<img class="su-carrousel-item" src="http://placedog.net/301/360?r">
<img class="su-carrousel-item" src="http://placedog.net/301/360/s?r">
<img class="su-carrousel-item" src="http://placedog.net/302/360?r">
</div>
<button class="su-navigation-button su-inside su-left" 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>
<ul class="nav">
<li class="puce su-active">•</li>
<li class="puce">•</li>
<li class="puce">•</li>
<li class="puce">•</li>
<li class="puce">•</li>
</ul>
</div>
Démo 2 : rembobinage inactif
On ne peut pas revenir en arrière sur la 1re diapo, ni allez à la suivante sur la dernière diapo.
<style>
.demo2 {
width: 300px;
}
.nav {
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
.puce {
display: inline-block;
font-size: 30px;
color: lightgray;
}
.puce:hover {
cursor: pointer;
color: red;
}
.puce.su-active {
color: black;
cursor: auto;
}
</style>
<div class="demo2">
<div class="demoswipe-masque su-carrousel snap-migrate">
<div class="su-carrousel-container" data-suswipe='{"sel":".su-carrousel-item","navSel":".demo2 .nav .puce"}'>
<img class="su-carrousel-item" src="http://placedog.net/300/350?r">
<img class="su-carrousel-item" src="http://placedog.net/300/350/g?r">
<img class="su-carrousel-item" src="http://placedog.net/301/350?r">
</div>
<button class="su-navigation-button su-inside su-left" 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>
<ul class="nav">
<li class="puce su-active">•</li>
<li class="puce">•</li>
<li class="puce">•</li>
</ul>
</div>
Démo 3 : défilement auto
Paramètre en millisecondes.
<style>
.demo3 {
width: 300px;
}
.nav {
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
.puce {
display: inline-block;
font-size: 30px;
color: lightgray;
}
.puce:hover {
cursor: pointer;
color: red;
}
.puce.su-active {
color: black;
cursor: auto;
}
</style>
<div class="demo3">
<div class="demoswipe-masque su-carrousel snap-migrate">
<div class="su-carrousel-container" data-suswipe='{"defile":3000,"rambo":true,"sel":".su-carrousel-item ","navSel":".demo3 .nav .puce"}'>
<img class="su-carrousel-item" src="http://placedog.net/300/345?r">
<img class="su-carrousel-item" src="http://placedog.net/302/345?r">
<img class="su-carrousel-item" src="http://placedog.net/301/345?r">
</div>
<button class="su-navigation-button su-inside su-left" 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>
<ul class="nav">
<li class="puce su-active">•</li>
<li class="puce">•</li>
<li class="puce">•</li>
</ul>
</div>
Démo 4 : halfSwipe: permet le défilement d’éléments de tailles variables
Paramètre (faux par défaut) permettant de surcharger le calcul habituel. Au lieu d’avancer par "pas" correspondant à autant de diapos qu’il y a la place d’en faire défiler, on avance juste de la moitié de la largeur du carrousel.
Rend impossible l’utilisation des puces de navigation.
<style>
.demo4 {
width: 300px;
}
.nav {
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
.puce {
display: inline-block;
font-size: 30px;
color: lightgray;
}
.puce:hover {
cursor: pointer;
color: red;
}
.puce.su-active {
color: black;
cursor: auto;
}
</style>
<div class="demo4">
<div class="demoswipe-masque su-carrousel snap-migrate">
<div class="su-carrousel-container" data-suswipe='{"halfSwipe":true,"rambo":false,"sel":".su-carrousel-item"}'>
<img class="su-carrousel-item" style="min-width: 100px; min-height: 145px" src="http://placedog.net/100/145?r">
<img class="su-carrousel-item" style="min-width: 500px; min-height: 145px" src="http://placedog.net/500/145?r">
<img class="su-carrousel-item" style="min-width: 50px; min-height: 145px" src="http://placedog.net/50/145?r">
<img class="su-carrousel-item" style="min-width: 175px; min-height: 145px" src="http://placedog.net/175/145?r">
<img class="su-carrousel-item" style="min-width: 75px; min-height: 145px" src="http://placedog.net/75/145?r">
<img class="su-carrousel-item" style="min-width: 200px; min-height: 145px" src="http://placedog.net/200/145?r">
<img class="su-carrousel-item" style="min-width: 80px; min-height: 145px" src="http://placedog.net/80/145?r">
</div>
<button class="su-navigation-button su-inside su-left" 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>
</div>
Démo 5 : moins d’éléments que la taille prévue par le carrousel
Traitement spécifique d’un cas de figure, pour mettre dynamiquement la flèche de droite à inactif
<style>
.demo5 {
width: 300px;
}
.nav {
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
.puce {
display: inline-block;
font-size: 30px;
color: lightgray;
}
.puce:hover {
cursor: pointer;
color: red;
}
.puce.su-active {
color: black;
cursor: auto;
}
</style>
<div class="demo5">
<div class="demoswipe-masque su-carrousel snap-migrate">
<div class="su-carrousel-container" data-suswipe='{"halfSwipe":true,"rambo":false,"sel":".su-carrousel-item"}'>
<img class="su-carrousel-item" style="width: 100px; height: 145px" src="http://placedog.net/100/145">
</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>
</div>