Modular elements

Swiper

For detail documentation, Swiper Js documentation ⟶

<div class="row">
  <div class="col-lg-12 mb-4 mb-lg-0">
    <div class="swiper-theme-container theme-slider" data-swiper-theme-container="data-swiper-theme-container">
      <div class="swiper" data-swiper='{"autoplay":true,"spaceBetween":30,"loop":true,"loopedSlides":5,"slideToClickedSlide":true,"breakpoints":{"0":{"slidesPerView":1},"768":{"slidesPerView":2}}}'>
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../assets/images/feature/1.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/2.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/3.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/4.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/5.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/6.jpg" alt="" />
          </div>
        </div>
        <div class="swiper-pagination"> </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>
    </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-container element.

<div class="row">
  <div class="col-lg-12 mb-4 mb-lg-0">
    <div class="swiper-theme-container theme-slider" data-swiper-theme-container="data-swiper-theme-container">
      <div class="swiper" data-swiper='{"spaceBetween":5,"loop":true,"loopedSlides":5,"thumb":{"spaceBetween":5,"slidesPerView":5,"loop":true,"freeMode":true,"grabCursor":true,"loopedSlides":5,"slideToClickedSlide":true,"watchSlidesVisibility":true,"watchSlidesProgress":true},"slideToClickedSlide":true}'>
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../assets/images/feature/1.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/2.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/3.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/4.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/5.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/6.jpg" alt="" />
          </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>
    </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-container theme-slider" data-swiper-theme-container="data-swiper-theme-container">
      <div class="swiper" data-swiper='{"autoplay":true,"spaceBetween":5,"loop":true,"loopedSlides":5,"slideToClickedSlide":true,"effect":"fade"}'>
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../assets/images/feature/1.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/2.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/3.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/4.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/5.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/feature/6.jpg" alt="" />
          </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>
    </div>
  </div>
</div>

JavaScript

<script src="vendors/swiper/swiper-bundle.min.js"></script>

CSS

<link src="vendors/swiper/swiper-bundle.min.css" rel="stylesheet" />