JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

  <div class="swiper-container mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://oxygen.test/wp-content/uploads/2021/07/artistic.png"></div>
      <div class="swiper-slide"><img src="https://oxygen.test/wp-content/uploads/2021/07/orphic.png"></div>
      <div class="swiper-slide"><img src="https://oxygen.test/wp-content/uploads/2021/07/hectares.png"></div>
      <div class="swiper-slide"><img src="https://oxygen.test/wp-content/uploads/2021/07/fly.png"></div>
      <div class="swiper-slide"><img src="https://oxygen.test/wp-content/uploads/2021/07/irealm.png"></div>
      <div class="swiper-slide"><img src="https://oxygen.test/wp-content/uploads/2021/07/bonstato.png"></div>
      <div class="swiper-slide"><img src="https://oxygen.test/wp-content/uploads/2021/07/brewista.png"></div>
      <div class="swiper-slide"><img src="https://oxygen.test/wp-content/uploads/2021/07/babywhisk.png"></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 'auto',
      spaceBetween: 30,

      autoplay: {
        delay: 1000,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      breakpoints: {
        640: {
          slidesPerView: 4,
          spaceBetween: 20,
        },
        768: {
          slidesPerView: 4,
          spaceBetween: 40,
        },
        1024: {
          freeMode: true,
          slidesPerView: 5,
          spaceBetween: 50,
        },
      },
    });

  </script>