Besoins d'un site web sur mesure pour votre entreprise

Contactez-moi
Javascript

Création d'un Carrousel Flexible en HTML, CSS et JavaScript

Par Malik • 03 August 2024

Dans cet article, nous allons explorer la construction d'un carrousel flexible en utilisant HTML, CSS et JavaScript. Un carrousel est un élément interactif qui permet de faire défiler des éléments tels que des images ou des textes. Nous allons détailler chaque étape de la création d'un carrousel responsive et élégant.

HTML

Voici la structure HTML de notre carrousel :


  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Carrousel flexible</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;500&display=swap"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <main id="app">
      <section class="carousel">
        <ul class="carousel__list">
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://wallpaper.forfun.com/fetch/46/46b7838d480b7df5c665985979637809.jpeg"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Jon Snow</h2>
                <h3 class="user__title">Commandant de la Garde de Nuit</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://static.hbo.com/content/dam/hbodata/series/game-of-thrones/character/s5/daenarys-1920.jpg?w=1200"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Daenerys Targaryen</h2>
                <h3 class="user__title">Mère des Dragons</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/05/10/14/maisie-williams-as-arya-stark-in-game-of-thrones-season-8-1.jpg"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Arya Stark</h2>
                <h3 class="user__title">Sans-Visage</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://media.gqmagazine.fr/photos/5ce7a114cbf34359dc6165ca/4:3/w_2879,h_2160,c_limit/66311973cd2c5eb9735bb40817766e40.png"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Tyrion Lannister</h2>
                <h3 class="user__title">Main de la Reine</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0" data-active="data-active">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://www.thesun.co.uk/wp-content/uploads/2017/07/nintchdbpict000166014810.jpg"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Cersei Lannister</h2>
                <h3 class="user__title">Reine des Sept Couronnes</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://static1.colliderimages.com/wordpress/wp-content/uploads/2022/03/Jaime-Game-of-Thrones.jpg"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Jaime Lannister</h2>
                <h3 class="user__title">Régicide</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://images.rtl.fr/~c/2000v2000/rtl/www/1337313-sophie-turner-alias-sansa-stark-dans-la-saison-7-de-game-of-thrones.jpg"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Sansa Stark</h2>
                <h3 class="user__title">Reine du Nord</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://static.wikia.nocookie.net/game-of-thrones-fan/images/3/3c/Margaery_lounging.jpeg/revision/latest?cb=20170513115317"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Reine des Sept Couronnes</h2>
                <h3 class="user__title">
                  Reine astucieuse et charmante, maîtresse de l'intrigue
                  politique.
                </h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://static.wikia.nocookie.net/game-of-thrones-le-trone-de-fer/images/3/33/Bran_Stark.png/revision/latest?cb=20190521022312&path-prefix=fr"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Bran Stark</h2>
                <h3 class="user__title">Roi des Six Couronnes</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://static.wikia.nocookie.net/game-of-thrones-le-trone-de-fer/images/3/34/Jorah_Mormont.png/revision/latest?cb=20190419170046&path-prefix=fr"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Jorah Mormont</h2>
                <h3 class="user__title">Chevalier Exilé</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://pm1.aminoapps.com/6894/e316886dbc20e9bdf5840ea66c6d99ecc8c82aa9r1-736-1128v2_hq.jpg"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Samwell Tarly</h2>
                <h3 class="user__title">Maître des Citadelles</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://www.parismatch.com/lmnr/var/pm/public/media/image/2022/03/02/06/Game-of-Thrones-Gwendoline-Christie-a-du-elle-meme-postuler-aux-Emmy-Awards.jpg?VersionId=GeoGHZbSixTVreIWdO6M6O9bfx89RudB"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Brienne de Torth</h2>
                <h3 class="user__title">Chevalier de Torth</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://static.wikia.nocookie.net/game-of-thrones-le-trone-de-fer/images/8/81/Theon_Greyjoy.png/revision/latest?cb=20190419214021&path-prefix=fr"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Theon Greyjoy</h2>
                <h3 class="user__title">Prince des Îles de Fer</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://oyster.ignimgs.com/wordpress/stg.ign.com/2014/10/TAAINe3.jpg"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Missandei</h2>
                <h3 class="user__title">Conseillère de la Reine Daenerys</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://i.insider.com/5975ec18b4ec01345d8b4761?width=1136&format=jpeg"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Ghost</h2>
                <h3 class="user__title">Loup de Jon Snow</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://static.wikia.nocookie.net/game-of-thrones-le-trone-de-fer/images/5/5d/Drogon.png/revision/latest?cb=20190415161915&path-prefix=fr"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Drogon</h2>
                <h3 class="user__title">Dragon de Daenerys</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://images.rtl.fr/~c/2000v2000/rtl/www/1344490-le-roi-de-la-nuit-dans-game-of-thrones.jpg"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Roi de la Nuit</h2>
                <h3 class="user__title">Chef des Marcheurs Blancs</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://static1.cbrimages.com/wordpress/wp-content/uploads/2022/12/eddard-stark-got.gif"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Eddard Stark</h2>
                <h3 class="user__title">Seigneur de Winterfell</h3>
              </div>
            </div>
          </li>

          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://static.wikia.nocookie.net/game-of-thrones-le-trone-de-fer/images/a/a5/The_Dragon_and_the_Wolf_7x07_%2853%29.jpg/revision/latest?cb=20170830142640&path-prefix=fr"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Petyr Baelish</h2>
                <h3 class="user__title">Maître des Chuchoteurs</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYDmOV9BVWglGnRy_N9g13Cj67wiei1uRvbQ&s"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Varys</h2>
                <h3 class="user__title">Maître des Murmures</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://static.wikia.nocookie.net/gameofthrones/images/c/c5/Rory-McCann-as-Sandor-The-Hound-Clegane_photo-Helen-Sloane_HBO.jpg/revision/latest/scale-to-width-down/3156?cb=20140130214715"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Sandor Clegane</h2>
                <h3 class="user__title">Le Limier</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://static.hbo.com/content/dam/hbodata/series/game-of-thrones/character/s5/melisandre-1920.jpg?w=1200"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Melisandre</h2>
                <h3 class="user__title">Prêtresse Rouge</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/game-of-thrones/5/5b/Davos_seaworth_photo.jpg"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Davos Seaworth</h2>
                <h3 class="user__title">Chevalier</h3>
              </div>
            </div>
          </li>
          <li class="carousel__item" tabindex="0">
            <div class="carousel__box">
              <div class="carousel__image">
                <img
                  src="https://static.wikia.nocookie.net/game-of-thrones-le-trone-de-fer/images/0/0c/Joffrey_Baratheon.png/revision/latest/scale-to-width-down/350?cb=20170706170114&path-prefix=fr"
                  width="480"
                  height="720"
                />
              </div>
              <div class="carousel__contents">
                <h2 class="user__name">Joffrey Baratheon</h2>
                <h3 class="user__title">
                  Roi le plus mowdi des Sept Couronnes
                </h3>
              </div>
            </div>
          </li>
        </ul>

        <div class="carousel__nav">
          <button class="prev"><i></i><span>précédent</span></button>
          <button class="next">
            <span>suivant</span>
            <i></i>
          </button>
        </div>
      </section>
    </main>
    <a
      class="social-icon codepen"
      href="https://www.malik-dev.tech"
      title="view my codepens"
      target="_blank"
    >
      <span>Malik Abdel</span>
    </a>

    <script src="./script.js"></script>
  </body>
</html>

Explication du Code HTML

<main id="app">

Le conteneur principal de la page, utilisé ici pour entourer le carrousel.

<section class="carousel">

Le conteneur principal du carrousel. Il regroupe la liste des éléments et les contrôles de navigation.

<ul class="carousel__list">

Liste non ordonnée contenant les éléments du carrousel.

<li class="carousel__item">

Élément individuel du carrousel. Chaque élément est représenté par un <li> qui contient l'image et le texte associé.

<div class="carousel__box">

Conteneur pour l'image et le texte de chaque élément du carrousel.

<div class="carousel__image">

Conteneur pour l'image du carrousel.

<div class="carousel__contents">

Conteneur pour le texte associé à chaque élément du carrousel. Il contient le nom et le titre de l'élément.

<div class="carousel__nav">

Contient les boutons de navigation pour faire défiler les éléments du carrousel. Les boutons "précédent" et "suivant" permettent de naviguer entre les éléments.

CSS

Le code CSS est utilisé pour styliser le carrousel, définir les positions des éléments, et ajouter des transitions pour les effets de défilement :


  :root {
  --canvas: 220;
  --bg: hsl(var(--canvas), 15%, 22%);
  --fg: hsl(var(--canvas), 39%, 95%);
  --link: hsl(var(--canvas), 90%, 80%);
  --wgt: 200;
  --height: calc(80vh - 50px);
  --width: 450px;
}

body,
html {
  font-family: heebo, sans-serif;
  color: var(--fg);
  background: linear-gradient(rgba(51, 51, 51, 0.678), rgba(24, 24, 24, 0.6)),
    url("https://static.hitek.fr/img/actualite/ill_m/413718101/gottrone.jpg")
      no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  font-weight: var(--wgt);
  padding: 0 0 50px;
  display: grid;
  place-items: center;
  height: 100%;
}

a {
  color: var(--link);
  text-decoration: none;
  font-weight: 450;
  transition: all 0.3s ease;
}
a:hover,
a:focus,
a:active {
  color: #e8eff4;
}
button {
  background: hsl(var(--canvas), 10%, 10%);
  color: inherit;
  border: none;
  border-radius: 0.5em;
  padding: 0.25em 0.5em;
  font-family: inherit;
  font-size: inherit;
}

@keyframes iconsLoad {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

body {
  overflow-y: hidden;
}

.carousel {
  display: grid;
  transform: translate3d(0, 0, 0.1px);
}

.carousel__list {
  display: flex;
  overflow: hidden;
  list-style: none;
  padding: 2em 0 3em;
  margin: 0;
  contain: layout;
  isolation: isolate;
}

.carousel__item {
  display: grid;
  position: relative;
  align-content: start;
  margin: 0 10px;
  padding: 0;
  flex: 1 1 10%;
  height: var(--height);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  transform: translate3d(0, 0, 0.1px);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 15px 2px,
    rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
    rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  contain: layout;
  isolation: isolate;
}

.carousel__item,
.carousel__item * {
  transition: all 0.6s cubic-bezier(0.55, 0.24, 0.18, 1);
  user-select: none;
}

.carousel__image,
.carousel__contents {
  width: var(--width);
  height: auto;
}

.carousel__item:hover {
  flex-basis: calc(var(--width) / 2);
  transition: all 0.3s ease;
}

.carousel__item[data-active] {
  flex-basis: var(--width);
  flex-grow: 0;
}

@media screen and (max-width: 800px) {
  .carousel__item {
    flex-basis: 15%;
  }
}

@media screen and (max-width: 600px) {
  .carousel__item {
    flex-basis: 10%;
    margin: 0 5px;
    border-radius: 8px;
    font-size: 3vw;
  }

  .carousel__item[data-active] {
    flex-basis: 45%;
    flex-grow: 0;
  }

  .carousel__item:nth-child(3),
  .carousel__item:nth-child(7) {
    flex: 0 0 10px;
  }

  .carousel__item:nth-child(2),
  .carousel__item:nth-child(8) {
    flex: 0 0 5px;
    transform: translateX(-50px);
  }

  .carousel__item:nth-child(8) {
    transform: translateX(50px);
  }

  .carousel__item:nth-child(1),
  .carousel__item:nth-child(n + 9) {
    flex: 0 0 0px;
    margin: 0;
    box-shadow: none;
    opacity: 0 !important;
  }

  .carousel__item:not(:nth-child(n + 5)) img,
  .carousel__item:nth-child(n + 7) img {
    opacity: 0.8;
  }

  .carousel__item:not(:nth-child(n + 4)) *,
  .carousel__item:nth-child(n + 7) * {
    opacity: 0 !important;
  }
}

@media screen and (min-width: 600px) {
  .carousel__item:nth-child(3),
  .carousel__item:nth-child(10) {
    flex: 0 0 10px;
  }

  .carousel__item:nth-child(2),
  .carousel__item:nth-child(11) {
    flex: 0 0 5px;
    transform: translateX(-50px);
  }

  .carousel__item:nth-child(11) {
    transform: translateX(50px);
  }

  .carousel__item:nth-child(1),
  .carousel__item:nth-child(n + 12) {
    flex: 0 0 0px;
    margin: 0;
    box-shadow: none;
    opacity: 0 !important;
  }

  .carousel__item:not(:nth-child(n + 5)) img,
  .carousel__item:nth-child(n + 9) img {
    opacity: 0.8;
  }

  .carousel__item:not(:nth-child(n + 4)) *,
  .carousel__item:nth-child(n + 10) * {
    opacity: 0 !important;
  }
}

.carousel__item img {
  display: block;
  position: absolute;
  width: var(--width);
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  aspect-ratio: 2/3;
  object-fit: cover;
  filter: saturate(0.2) contrast(0.75) brightness(1.1);
}

.carousel__item::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 1;
  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(50, 50, 50, 0.7) 70%,
    rgba(30, 30, 30, 0.9) 100%
  );

  transition: all 0.66s cubic-bezier(0.55, 0.24, 0.18, 1);
}

.carousel__item[data-active]::after {
  transform: translateY(100%);
}

.carousel__item[data-active],
.carousel__item[data-active] * {
  opacity: 1;
  filter: none;
}

.carousel__contents {
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  min-height: 200px;
  padding: 1em;
  z-index: 2;
  background-image: radial-gradient(
    ellipse at 0px 0px,
    rgba(0, 0, 0, 0.4) 20%,
    transparent 50%
  );
  background-size: 170% 200px;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

.carousel__contents .user__name {
  color: #e8eff4;
  font-size: 1.75em;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.carousel__contents .user__title {
  font-family: lexend;
  font-size: 0.875em;
  letter-spacing: 1.25px;
  font-weight: 500;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(270deg, rgb(255, 251, 0), rgb(255, 187, 0));
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0.85;
  text-wrap: balance;
  margin-bottom: 0.5em;
}

.carousel__contents .user__title,
.carousel__contents .user__name {
  margin: 0;
  line-height: 1.1;
  opacity: 0;
  transform: translateX(-200px);
  transition-duration: 1s;
  max-width: 18em;
}

@media screen and (max-width: 800px) {
  .carousel__item img {
    width: calc(var(--width) * 0.5);
  }
  .carousel__contents {
    transform: translateX(-100%) rotate(90deg);
    transform-origin: bottom right;
    align-items: end;
    justify-content: end;
    background-image: radial-gradient(
      ellipse at 100% 100%,
      rgba(0, 0, 0, 0.4) 0%,
      transparent 50%
    );
    background-position: -100% 100%;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: right;
  }
  [data-active] .carousel__contents {
    background-position: 100% 100%;
  }
  .carousel__contents .user__title,
  .carousel__contents .user__name {
    max-width: 70vh;
    transform: translateX(200px);
  }
}

[data-active] .carousel__contents * {
  transform: translateX(0px);
  transition-duration: 0.66s;
  opacity: 1;
}
[data-active] .carousel__contents .user__name {
  transition-delay: 0.1s;
}
[data-active] .carousel__contents .user__title {
  opacity: 0.85;
  transition-delay: 0.05s;
}

.carousel__nav {
  padding: 1em;
  justify-self: end;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  gap: 1em;
}

button {
  display: flex;
  gap: 0.5em;
  padding: 0.5em 1.5em;
}

body,
html {
  padding: 0;
  align-items: start;
}

Explication du Code CSS

Ce code CSS crée un carousel élégant avec des effets dynamiques. Voici les points clés :

  • Variables CSS : Définition de couleurs, dimensions et autres variables pour une personnalisation facile.
  • Styles de Base :
    • body et html sont configurés avec une police spécifique, un fond en dégradé et une image d'arrière-plan fixe.
    • Les liens (a) ont une couleur personnalisée et un effet de survol.
    • Les boutons ont un fond sombre avec un texte hérité, sans bordure, et un rayon de bordure pour un effet arrondi.
  • Carousel :
    • .carousel utilise une grille pour la mise en page.
    • .carousel__list affiche les éléments en ligne avec un défilement horizontal.
    • .carousel__item est un conteneur flexible pour chaque diapositive, avec une ombre et un fond semi-transparent.
  • Effets Dynamiques :
    • Utilisation d'animations pour faire apparaître les éléments de manière fluide.
    • Les éléments actifs dans le carousel prennent plus de place et sont mis en avant.
  • Réactivité :
    • Les règles @media ajustent les tailles et les positions pour différentes résolutions d'écran, optimisant le carousel pour les mobiles.
  • Images et Contenus :
    • Les images du carousel sont ajustées pour remplir les diapositives avec un effet de filtre.
    • Les contenus du carousel (.carousel__contents) utilisent des dégradés pour améliorer la lisibilité du texte et sont ajustés selon la taille de l'écran.

Ce design assure une présentation visuellement attrayante et adaptable aux différentes tailles d'écran tout en offrant une expérience utilisateur fluide.

JavaScript

Le code JavaScript est utilisé pour gérer le défilement des slides en réponse aux interactions de l'utilisateur :


 const d = document;
const $q = d.querySelectorAll.bind(d);
const $g = d.querySelector.bind(d);
const $prev = $g(".prev");
const $next = $g(".next");
const $list = $g(".carousel__list");
let auto;
let pauser;

const getActiveIndex = () => {
  const $active = $g("[data-active]");
  return getSlideIndex($active);
};

const getSlideIndex = ($slide) => {
  return [...$q(".carousel__item")].indexOf($slide);
};

const prevSlide = () => {
  const index = getActiveIndex();
  const $slides = $q(".carousel__item");
  const $last = $slides[$slides.length - 1];
  $last.remove();
  $list.prepend($last);
  activateSlide($q(".carousel__item")[index]);
};
const nextSlide = () => {
  const index = getActiveIndex();
  const $slides = $q(".carousel__item");
  const $first = $slides[0];
  $first.remove();
  $list.append($first);
  activateSlide($q(".carousel__item")[index]);
};

const chooseSlide = (e) => {
  const max = window.matchMedia("screen and ( max-width: 600px)").matches
    ? 5
    : 8;
  const $slide = e.target.closest(".carousel__item");
  const index = getSlideIndex($slide);
  if (index < 3 || index > max) return;
  if (index === max) nextSlide();
  if (index === 3) prevSlide();
  activateSlide($slide);
};

const activateSlide = ($slide) => {
  if (!$slide) return;
  const $slides = $q(".carousel__item");
  $slides.forEach((el) => el.removeAttribute("data-active"));
  $slide.setAttribute("data-active", true);
  $slide.focus();
};

const autoSlide = () => {
  nextSlide();
};

const pauseAuto = () => {
  clearInterval(auto);
  clearTimeout(pauser);
};

const handleNextClick = (e) => {
  pauseAuto();
  nextSlide(e);
};

const handlePrevClick = (e) => {
  pauseAuto();
  prevSlide(e);
};

const handleSlideClick = (e) => {
  pauseAuto();
  chooseSlide(e);
};

const handleSlideKey = (e) => {
  switch (e.keyCode) {
    case 37:
    case 65:
      handlePrevClick();
      break;
    case 39:
    case 68:
      handleNextClick();
      break;
  }
};

const startAuto = () => {
  auto = setInterval(autoSlide, 3000);
};

startAuto();

$next.addEventListener("click", handleNextClick);
$prev.addEventListener("click", handlePrevClick);
$list.addEventListener("focusin", handleSlideClick);
$list.addEventListener("keyup", handleSlideKey);

Explication du Code JavaScript

Ce script JavaScript contrôle les fonctionnalités interactives du carousel, y compris le défilement automatique et les contrôles manuels. Voici les points clés :

  • Variables et Sélecteurs :
    • d est une référence au document pour simplifier les sélecteurs.
    • $q et $g sont des raccourcis pour querySelectorAll et querySelector respectivement, facilitant la sélection des éléments du DOM.
    • Les constantes $prev et $next sont les boutons pour naviguer entre les diapositives.
    • $list est la liste des diapositives du carousel.
  • Fonctions de Navigation :
    • getActiveIndex : Obtient l'index de la diapositive actuellement active.
    • getSlideIndex : Trouve l'index d'une diapositive spécifique parmi toutes les diapositives.
    • prevSlide et nextSlide : Permettent de déplacer les diapositives vers l'avant ou l'arrière. Ils ajustent la position des diapositives dans la liste en déplaçant la première ou la dernière diapositive.
  • Activation de Diapositive :
    • chooseSlide : Gère la sélection d'une diapositive lorsqu'on clique dessus, et ajuste la position du carousel en fonction de la taille de l'écran.
    • activateSlide : Active une diapositive en supprimant l'attribut data-active des autres diapositives et en le définissant pour la diapositive sélectionnée.
  • Défilement Automatique :
    • autoSlide : Fonction appelée automatiquement pour faire défiler les diapositives vers l'avant.
    • pauseAuto : Arrête le défilement automatique en effaçant les intervalles et les minuteries en cours.
    • startAuto : Démarre le défilement automatique toutes les 3 secondes.
  • Gestion des Événements :
    • handleNextClick et handlePrevClick : Gèrent les clics sur les boutons "suivant" et "précédent", en mettant en pause le défilement automatique.
    • handleSlideClick : Gère les clics sur les diapositives pour les sélectionner.
    • handleSlideKey : Permet la navigation au clavier en utilisant les touches fléchées gauche/droite ou les touches A/D.

Le script garantit une expérience utilisateur fluide en intégrant des contrôles manuels et la possibilité de sélectionner des diapositives spécifiques.

Conclusion

Et voilà, cher(e)s lecteurs ! Avec ce carrousel, vous êtes prêt(e)s à faire défiler vos diapositives avec autant d'élégance que les grandes familles de Westeros manient leur épée.

En résumé, notre carrousel est conçu pour offrir une expérience visuelle dynamique et engageante. Grâce à des transitions fluides et une interaction utilisateur optimisée, il est prêt à captiver vos visiteurs et à mettre en valeur vos contenus avec élégance.

Nous avons intégré des fonctionnalités telles que le défilement automatique, la navigation manuelle et la possibilité de sélectionner directement les diapositives. Que vous soyez un amateur de design web ou un développeur chevronné, ce carrousel est conçu pour répondre à vos besoins tout en apportant une touche esthétique moderne à votre site.

Demo Télécharger le fichier source
Suivez-moi
Description de votre image
Conception de site vitrine personnalisé

Concevez un site web moderne qui attire et engage vos visiteurs dès la première vue.

Obtenez votre devis personnalisé
Articles récemment lus

Coding is easy