[JS-CSS]Carousel infini et « responsive »

NoSmokingJan. 2024

Page d'expérimentations et de tests pour le module Carousel infini et « responsive »

Classes CSS disponibles

Un certain nombre de paramètres peuvent être gérés en CSS en ajoutant directement une classe sur l'élément carousel :

Diaporama pleine largeur Ajout de la classe carousel-full-width.
Images pleine largeur Ajout de la classe img-full-width.
Arrows inside Ajout de la classe arrows-inside.
Arrows hidden Ajout de la classe arrows-hidden.
Indicators inside Ajout de la classe indicators-inside.
Indicators hidden Ajout de la classe indicators-hidden.

Démo galerie images

Liste images : Lecture diaporama :

Observations

En absence de directive max-width sur l'élément « wrapper », l'élément carousel prend toute la place disponible sur la ligne.

Si l'on veut que les images occupent le maximum d'espace disponible il faut leurs ajouter la déclaration width:100%.

Si les images de l'élément carousel-content sont déclarées avec une width:100% celles-ci s'adapteront à la largeur en respectant l'aspect-ratio.

Déplacements

Les déplacements peuvent se faire à l'aide :

d'un clic sur les fléches <(previous), >(next) ;
des touches de direction du clavier ;
d'un glissement de l'image à la souris ;
de la molette de la souris ;
d'un clic sur les indicateurs de position du slide.

Structure HTML

<div class="carousel" id="carousel">
  <div class="carousel-wrapper">
    <div class="carousel-content">
      <img src="../images/image_001.jpg" alt="Barque sans pêcheur">
      <img src="../images/image_002.jpg" alt="Transats plein soleil">
      <img src="../images/image_003.jpg" alt="Piscine à débordement">
      <img src="../images/image_004.jpg" alt="Eau turquoise">
      <img src="../images/image_005.jpg" alt="Coin détente">
      <img src="../images/image_006.jpg" alt="You know what ?">
    </div>
  </div>
</div>

Intégration

Il vous suffit d'ajouter ces lignes dans la partie <head> de votre document.

<link rel="stylesheet" href="carousel.css">
<script src="carousel-class.js"></script>

Syntaxe

const slide = new Carousel(idElement);
const slide = new Carousel(idElement [,options]);
const slide = new Carousel(idElement [,options][,callback]);

Paramètres

idElement

L'ID de l'élément à traiter,

optionsoptionnel

Objet permettant d'initialiser, ou modifier, les paramètres par défaut.

Exemple :

const slide = new Carousel("carousel", {
  delayDiapo: 1000,   // durée de la pause du diaporama fixée à 1000ms
  startAt: 4,         // l'image affichée sera la 4éme
  scrollBar: {
    top: 0,           // la barre d'avance est positionnée en haut
    color: "#F00"     // couleur de la barre d'avance en rouge
  },
});

delayDiapo

Durée de la pause entre images exprimée en millisecondes.

Les unités ne sont pas prises en compte.

Valeur par défaut : 3000

startAt

Position de l'image de départ.

Valeur par défaut : 0

displayArrow

Affiche/masque les fléches de direction.

Valeur par défaut : true

displayIndicator

Affiche/masque les indicateurs de progression.

Valeur par défaut : true

transition

Vitesse de translation de l'image exprimée en millisecondes.

Valeur par défaut : 500ms

callbackoptionnel

Fonction de « rappel » qui sera exécutée une fois le Carousel instancié.