JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Слайд 1</div>
    <div class="swiper-slide">Слайд 2</div>
    <div class="swiper-slide">Слайд 3</div>
    <div class="swiper-slide">Слайд 4</div>
    <div class="swiper-slide">Слайд 5</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

CSS

.swiper-slide {
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  margin-right: 10px;
  transition: transform 0.3s ease;
}

JavaScript

let swiper = new Swiper('.swiper-container', {
  slidesPerView: 2,
  spaceBetween: 10,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});