<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="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 class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<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 class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
<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 class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
.swiper {
  max-width: 340px;
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
}
const swiper = new Swiper(".swiper", {
  pagination: {
    el: ".swiper-pagination"
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.