JSFiddle - React, Tailwind, and code Playground

by majikarikeruo

HTML

<div class="swiper-container">

  <ul class="swiper-wrapper">
    <li class="swiper-slide"><img src="https://kosugelian.net/images/stamp8.png" alt=""></li>
    <li class="swiper-slide"><img src="https://kosugelian.net/images/stamp4.png" alt=""></li>
    <li class="swiper-slide"><img src="https://kosugelian.net/images/stamp25.png" alt=""></li>
  </ul>
  
  <div class="swiper-pagination"></div>

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

</div>

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.2/js/swiper.min.js"></script>

CSS

* {
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}

JavaScript

const mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
});