For more details see Swiper Js documentation⟶
<div class="swiper theme-slider" data-swiper='{"autoplay":true,"spaceBetween":30,"loop":true,"slidesPerView":1,"breakpoints":{"670":{"slidesPerView":2},"1200":{"slidesPerView":3}}}'>
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-1.jpg" alt="image" /></div>
<div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-7.jpg" alt="image" /></div>
<div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-3.jpg" alt="image" /></div>
<div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-4.jpg" alt="image" /></div>
<div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-5.jpg" alt="image" /></div>
<div class="swiper-slide"><img class="w-100" src="../assets/img/portrait-6.jpg" alt="image" /></div>
</div>
<div class="swiper-nav">
<div class="swiper-button-prev"><span class="fas fa-chevron-left"></span></div>
<div class="swiper-button-next"><span class="fas fa-chevron-right"></span></div>
</div>
</div>Swiper with thumbnail
This can be simply done by using the attribute. For Swiper with thumbnail use thumb options in your pug/HTML. You can place thumbnail to a specific parent by providing thumbOptions: '#parentID' value in thumb options. Otherwise thumbnail will place after the .swiper element.
<div class="swiper theme-slider" data-swiper='{"spaceBetween":5,"loop":true,"loopedSlides":5,"thumb":{"spaceBetween":5,"slidesPerView":5,"loop":true,"freeMode":true,"grabCursor":true,"loopedSlides":5,"centeredSlides":true,"slideToClickedSlide":true,"watchSlidesVisibility":true,"watchSlidesProgress":true},"slideToClickedSlide":true}'>
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="img-fluid" src="../assets/img/interior-1.jpg" alt="image" /></div>
<div class="swiper-slide"> <img class="img-fluid" src="../assets/img/interior-4.jpg" alt="image" /></div>
<div class="swiper-slide"> <img class="img-fluid" src="../assets/img/interior-6.jpg" alt="image" /></div>
</div>
<div class="swiper-nav">
<div class="swiper-button-prev"><span class="fas fa-chevron-left"></span></div>
<div class="swiper-button-next"><span class="fas fa-chevron-right"></span></div>
</div>
</div>Swiper without thumbnail
<div class="swiper theme-slider" data-swiper='{"autoplay":true,"spaceBetween":5,"loop":true,"loopedSlides":5,"slideToClickedSlide":true}'>
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="img-fluid" src="../assets/img/gallery/06-f.jpg" alt="image" /></div>
<div class="swiper-slide"> <img class="img-fluid" src="../assets/img/gallery/07-f.jpg" alt="image" /></div>
<div class="swiper-slide"> <img class="img-fluid" src="../assets/img/gallery/09-f.jpg" alt="image" /></div>
<div class="swiper-slide"> <img class="img-fluid" src="../assets/img/gallery/10-f.jpg" alt="image" /></div>
</div>
<div class="swiper-nav">
<div class="swiper-button-prev"><span class="fas fa-chevron-left"></span></div>
<div class="swiper-button-next"><span class="fas fa-chevron-right"> </span></div>
</div>
</div>JavaScript
<script src="vendors/swiper/swiper-bundle.min.js"></script>CSS
<link href="vendors/swiper/swiper-bundle.min.css" rel="stylesheet">