Swiper

These modular elements can be readily used and customized in every layout across pages.

For more details see Swiper Js documentation⟶

<div class="row">
  <div class="col-lg-12 mb-4 mb-lg-0">
    <div class="swiper theme-slider" data-swiper='{"autoplay":true,"spaceBetween":30,"loop":true,"loopedSlides":5,"slidesPerView":1,"breakpoints":{"670":{"slidesPerView":2},"1200":{"slidesPerView":3}}}'>
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img class="w-100" src="../../assets/img/gallery/01.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="w-100" src="../../assets/img/gallery/02.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="w-100" src="../../assets/img/gallery/03.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="w-100" src="../../assets/img/gallery/04.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="w-100" src="../../assets/img/gallery/05.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="w-100" src="../../assets/img/gallery/06.jpg" alt="" /></div>
      </div>
      <div class="swiper-nav">
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"> </div>
      </div>
    </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="row">
  <div class="col-lg-12 mb-4 mb-lg-0">
    <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,"centeredSlidesBounds":true,"slideToClickedSlide":true,"watchSlidesVisibility":true,"watchSlidesProgress":true}}'>
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img class="img-fluid" src="../../assets/img/interior-1.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="img-fluid" src="../../assets/img/interior-4.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="img-fluid" src="../../assets/img/interior-6.jpg" alt="" /></div>
        <div class="swiper-slide"><img class="img-fluid" src="../../assets/img/interior-1.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="img-fluid" src="../../assets/img/interior-4.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="img-fluid" src="../../assets/img/interior-6.jpg" alt="" /></div>
      </div>
      <div class="swiper-nav">
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </div>
</div>

Swiper without thumbnail

For Swiper without thumbnail simply remove thumb options from your pug/HTML.

<div class="row">
  <div class="col-lg-12 mb-4 mb-lg-0">
    <div class="swiper theme-slider" data-swiper='{"autoplay":true,"spaceBetween":5,"loop":true,"loopedSlides":5}'>
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img class="img-fluid" src="../../assets/img/interior-1.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="img-fluid" src="../../assets/img/interior-4.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="img-fluid" src="../../assets/img/interior-6.jpg" alt="" /></div>
      </div>
      <div class="swiper-nav">
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"> </div>
      </div>
    </div>
  </div>
</div>
JavaScript
<script src="vendors/swiper/swiper-bundle.min.js"></script>
CSS
<link src="vendors/swiper/swiper-bundle.min.css" rel="stylesheet">