JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <div class="swiper-container myswiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="dropdown">
          <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span>SLIDE 1</span>
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Menu 1</a></li>
            <li><a class="dropdown-item" href="#">Menu 2</a></li>
          </ul>
        </div>
      </div>
      <div class="swiper-slide">
        <span>SLIDE 2</span>
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</body>

CSS

.swiper-container > .swiper-wrapper > .swiper-slide{
  width:200px;
}

JavaScript

const swiper = new Swiper(".myswiper",{
  speed:1000,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  slidesPerView: 'auto',
  initialSlide:0,
  loop:true,
  loopedSlides:10,
  visibilityFullFit: true,
  autoResize: false,
  spaceBetween: 0,
});