<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"
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.