Carrousel perpétuel et responsif, ne nécessitant pas de JavaScript

Composant : SBE Carousel Loop

Ce carrousel à défilement continu attire l'attention et rend la page plus dynamique et engageante.
Il permet de présenter beaucoup d'informations dans un espace réduit.

Ce carrousel s'adapte à toutes les tailles d'écran en préservant un aspect agréable.

Utilisation de ce composant

Pour les autres applications, copier le code source HTML et CSS ci-dessous.

Paramétrage du composant dans le code CSS

Paramétrage initial

Au début du code CSS, déterminez les valeur par défaut pour les variables :

--sbe-img-width: clamp(mini, dynamique, maxi);
Définition dynamique de la largeur d'une image en fonction de l'affichage.
--sbe-direction: De droite à gauche forwards, autre sens reverse.
--sbe-duration: Vitesse de l'animation.

La largeur responsive de l'image utilise les fonctions CSS clamp() et calc().
Pour la fonction clamp() trois paramètres sont requis : Largeur minimale, largeur dynamique, largeur maximale.
Le deuxième paramètre est utilisé lorsque sa valeur est incluse entre les autres paramètres.

La largeur responsive utilise la fonction calc(fixe, proportionnelle) avec 2 paramètres qui sont additionnés :

La partie fixe utilise une valeur absolue en pixel ou en rem.
La partie proportionnelle utilise l'unité vw (viewport width), qui correspond à un pourcentage de la largeur du viewport.
C'est cette valeur qui rend la largeur de l'image responsive.
Les nombres décimaux peuvent être utilisés pour cette valeur.

Deux solutions pour définir plusieurs paramétrages pour le carrousel

Modifiez les variables CSS à la ligne 4 du code HTML avec un attribut style.
Créer une classe par autre paramétrage nécessaire.
Dans chaque classe de personnalisation, définissez la valeur des variables à modifier.
La déclaration doit être précédé de la classe .carousel-loop sans utiliser d'espace entre les deux classes.

Exemples réalisés à partir des vignettes des thèmes CSS SiteBoostEdit

Premier exemple

Cet exemple utilise des dimensions plus petites déterminées par la classe .other-settings.
Les autres variables sont modifiées pour l'exemple. Voir le code CSS.

Deuxième exemple

Cet autre exemple emploie le même code HTML, à l'exception de la classe .other-sizes qui n'est pas utilisée.

Deuxième exemple

Code du composant

<!-- Code HTML -->
<div class="bg-light">
  <!-- other-settings : Classe facultative utilisée par le premier exemple -->
  <div class="carousel-loop other-settings">
    <ul>
      <li><img alt="Blue-classic Light" src="/assets/img/lg/sbe-blue-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Blue-classic Dark" src="/assets/img/lg/sbe-blue-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Indigo-classic Light" src="/assets/img/lg/sbe-indigo-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Indigo-classic Dark" src="/assets/img/lg/sbe-indigo-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Purple-classic Light" src="/assets/img/lg/sbe-purple-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Purple-classic Dark" src="/assets/img/lg/sbe-purple-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Pink-classic Light" src="/assets/img/lg/sbe-pink-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Pink-classic Dark" src="/assets/img/lg/sbe-pink-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Red-classic Light" src="/assets/img/lg/sbe-red-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Red-classic Dark" src="/assets/img/lg/sbe-red-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Orange-classic Light" src="/assets/img/lg/sbe-orange-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Orange-classic Dark" src="/assets/img/lg/sbe-orange-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Yellow-classic Light" src="/assets/img/lg/sbe-yellow-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Yellow-classic Dark" src="/assets/img/lg/sbe-yellow-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Green-classic Light" src="/assets/img/lg/sbe-green-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Green-classic Dark" src="/assets/img/lg/sbe-green-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Turquoise-classic Light" src="/assets/img/lg/sbe-turquoise-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Turquoise-classic Dark" src="/assets/img/lg/sbe-turquoise-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Cyan-classic Light" src="/assets/img/lg/sbe-cyan-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Cyan-classic Dark" src="/assets/img/lg/sbe-cyan-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
    </ul>
  </div>
</div>

/* Code CSS */
.carousel-loop {
  /* Début paramètres */
  --sbe-img-width: clamp(100px, calc(43px + 20vw), 433px);
  --sbe-direction: forwards; /* ou reverse; */
  --sbe-duration: 30s;
  /* Fin paramètres */

  overflow: hidden;
  --sbe-space: calc(3px + 1vw);
  margin: 0 max(.5rem, calc(var(--sbe-space) * 0.6));
  max-width: 100%;
}

.carousel-loop ul {
  display: flex;
  gap: min(var(--sbe-space), 1rem);
  margin: min(var(--sbe-space), 1rem);
  padding: 0;
  list-style: none;
  width: max-content;
  animation: carousel-loop-scroll var(--sbe-duration) var(--sbe-direction) linear infinite;
}

/* Stop l'animation lors du survol */
.carousel-loop ul:hover {
  animation-play-state: paused;
}

.carousel-loop ul li {
  margin: 0;
}
.carousel-loop ul li img {
  width: var(--sbe-img-width);
  height: auto;
  border-radius: var(--bs-border-radius);
}
@keyframes carousel-loop-scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* Classe facultative utilisée par le premier exemple */
.carousel-loop.other-settings {
  --sbe-img-width: clamp(120px, calc(22px + 17vw), 260px);
  --sbe-duration: 40s;
  --sbe-direction: reverse;
}