JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Swiper CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<h1>Swiper Test</h1>

<!-- Slider main container -->
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://placehold.jp/007369/ffffff/600x300.png?text=2" alt="2">
    </div>
    <div class="swiper-slide">
      <img src="https://placehold.jp/008C72/ffffff/600x300.png?text=3" alt="3">
    </div>
    <div class="swiper-slide">
      <img src="https://placehold.jp/02A676/ffffff/600x300.png?text=4" alt="4">
    </div>
    <div class="swiper-slide">
      <img src="https://placehold.jp/005A5B/ffffff/600x300.png?text=1" alt="1">
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

img {
  width: 100%;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}

.swiper {
  width: 100%;
  /* ↓↓↓大きい画面でブラウザ最大化された時の対策 */
  max-width: 1500px;
  margin: 0 auto;
  overflow: hidden;
}

JavaScript

const swiper = new Swiper('.swiper', {
  autoplay: {
    delay: 4000,
  },
　centeredSlides: true,
  centeredSlidesBounds: true,
  loop: true,
  slidesPerView: 3.5,
});