<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<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>
<div class="myswiper-wrapper">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/b9c4e2/000000?text=slide01" alt=""></div>
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/dfb9e2/000000?text=slide02" alt=""></div>
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/e2beb9/000000?text=slide03" alt=""></div>
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/d4e2b9/000000?text=slide04" alt=""></div>
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/b9e2cf/000000?text=slide05" alt=""></div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<div class="myswiper-wrapper">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/b9c4e2/000000?text=slide01" alt=""></div>
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/dfb9e2/000000?text=slide02" alt=""></div>
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/e2beb9/000000?text=slide03" alt=""></div>
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/d4e2b9/000000?text=slide04" alt=""></div>
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/b9e2cf/000000?text=slide05" alt=""></div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<div class="myswiper-wrapper">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/b9c4e2/000000?text=slide01" alt=""></div>
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/dfb9e2/000000?text=slide02" alt=""></div>
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/e2beb9/000000?text=slide03" alt=""></div>
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/d4e2b9/000000?text=slide04" alt=""></div>
      <div class="swiper-slide"><img src="https://via.placeholder.com/640x360/b9e2cf/000000?text=slide05" alt=""></div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

.swiper {
}

img {
  max-width: 100%;
  height: auto;
}

.myswiper-wrapper {
  position: relative;
  max-width: 340px;
  margin: 0 auto;
  padding: 0 50px;
}

$(".myswiper-wrapper").each(function (index, el) {
  const swiper = new Swiper(el.querySelector(".swiper"), {
    pagination: {
      el: el.querySelector(".swiper-pagination")
    },
    navigation: {
      nextEl: el.querySelector(".swiper-button-next"),
      prevEl: el.querySelector(".swiper-button-prev")
    }
  });
});