JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.0.1/swiper-bundle.min.js"></script>
<div class="swiper2 edu">
<div class="swiper-wrapper">
	<div class="swiper-slide"><a href="#"><img src="https://s.pstatic.net/static/newsstand/2023/0414/article_img/new_main/9027/112853_001.jpg" alt="" /></a></div>
	<div class="swiper-slide"><a href="#"><img src="https://s.pstatic.net/static/newsstand/2023/0414/article_img/new_main/9003/112406_001.jpg" alt="" /></a></div>
	<div class="swiper-slide"><a href="#"><img src="https://s.pstatic.net/static/newsstand/2023/0414/article_img/new_main/9008/121122_001.png" alt="" /></a></div>
	<div class="swiper-slide"><a href="#"><img src="https://s.pstatic.net/static/newsstand/2023/0414/article_img/new_main/9042/115832_001.jpg" alt="" /></a></div>
</div>
<div class="swiper-button-next next2"></div>
<div class="swiper-button-prev prev2"></div>
<div class="swiper-pagination2"></div>
</div>

CSS

.swiper2 {
	position:relative;
}

JavaScript

var swiper = new Swiper(".swiper2", {
	loop: true,
	spaceBetween: 60,
	centeredSlides: false,
	slidesPerView : 3,
	autoplay: {
		delay: 2500,
		disableOnInteraction: false,
	},
	pagination: {
		el: ".swiper-pagination2",
		clickable: true,
	},
	navigation: {
		nextEl: ".next2",
		prevEl: ".prev2",
	},
});