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="slider-section">
    <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>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</body>

CSS

:root{
  --swiper-navigation-size:20px !important;
}
.slider-section{
  top:50px;
  position:relative;
  width:400px;
  height:50px;
  margin:auto;
}
.swiper-container{
  width:90%;
  height:100%;
  pointer-events:none;
  background-color:lightgray;
}
.swiper-container:hover{
  height:300px;
}
.dropdown{
  pointer-events:auto;
}
.swiper-container > .swiper-wrapper > .swiper-slide{
  width:100px;
  margin-left:30px;
  margin-top:10px;
}

JavaScript

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