Swiper
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Documentation for swiperSwiper 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-container element.
<div class="swiper-theme-container">
<div class="swiper-container 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="rounded-1 img-fluid" src="../../../assets/img/generic/30.jpg" alt="" /></div>
<div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/31.jpg" alt="" /></div>
<div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/32.jpg" alt="" /></div>
<div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/33.jpg" alt="" /></div>
<div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/34.jpg" alt="" /></div>
<div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/35.jpg" alt="" /></div>
</div>
</div>
<div class="swiper-nav">
<div class="swiper-button-next"><span class="fas fa-chevron-right nav-icon"></span></div>
<div class="swiper-button-prev"><span class="fas fa-chevron-left nav-icon"></span></div>
</div>
</div>
Swiper without thumbnail
For Swiper without thumbnail simply remove thumb options from your pug/HTML.
<div class="swiper-theme-container">
<div class="swiper-container theme-slider" data-swiper='{"autoplay":true,"spaceBetween":5,"loop":true,"loopedSlides":5,"slideToClickedSlide":true}'>
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="rounded-1 img-fluid" src="../../../assets/img/generic/30.jpg" alt="" /></div>
<div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/31.jpg" alt="" /></div>
<div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/32.jpg" alt="" /></div>
<div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/33.jpg" alt="" /></div>
<div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/34.jpg" alt="" /></div>
<div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/35.jpg" alt="" /></div>
</div>
</div>
<div class="swiper-nav">
<div class="swiper-button-next"><span class="fas fa-chevron-right nav-icon"></span></div>
<div class="swiper-button-prev"><span class="fas fa-chevron-left nav-icon"></span></div>
</div>
</div>Swiper without navigation example
Stylesheet
<pre><code class="language-html"><link href="vendors/swiper/swiper-bundle.min.css" rel="stylesheet" /></code></pre><link href="vendors/swiper/swiper-bundle.min.css" rel="stylesheet" />Javascript
<pre><code class="language-html"><script src="vendors/swiper/swiper-bundle.min.js"></script></code></pre><script src="vendors/swiper/swiper-bundle.min.js"></script>