<div class="container">

  <div class="row">

    <div class="col-12">

​

      <div class="swiper mySwiper">

        <div class="swiper-wrapper">

          <div class="swiper-slide"><img src="https://picsum.photos/800/600?random=1&blur=5" class="img-fluid w-100" alt="..."></div>

          <div class="swiper-slide"><img src="https://picsum.photos/800/600?random=2&blur=5" class="img-fluid w-100" alt="..."></div>

          <div class="swiper-slide"><img src="https://picsum.photos/800/600?random=3&blur=5" class="img-fluid w-100" alt="..."></div>

          <div class="swiper-slide"><img src="https://picsum.photos/800/600?random=4&blur=5" class="img-fluid w-100" alt="..."></div>

        </div>

        <div class="swiper-button-next"></div>

        <div class="swiper-button-prev"></div>

        <div class="swiper-pagination"></div>

      </div>

​

    </div>

  </div>

</div>

document.addEventListener("DOMContentLoaded", function () {

  // Éxécuté lorsque le DOM est prêt

​

  let swiper = new Swiper(".mySwiper", {

    loop: true,

    navigation: {

      nextEl: ".swiper-button-next",

      prevEl: ".swiper-button-prev"

    },

    pagination: {

      el: ".swiper-pagination"

    },

    keyboard: true

  });

});

​