Swiper

Create stunning, touch-enabled sliders with Swiper, perfect for showcasing content with smooth transitions and intuitive navigation.

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 class="w-100 h-100" src="../assets/img/header-01.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/header-02.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/header-03.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/header-05.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/projects.jpg" alt="" />
          </div>
        </div>
        <div class="swiper-pagination"> </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>
</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,"centeredSlides":true,"slideToClickedSlide":true,"watchSlidesVisibility":true,"watchSlidesProgress":true},"slideToClickedSlide":true}'>
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/header-01.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/header-02.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/header-03.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/header-05.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/projects.jpg" alt="" />
          </div>
        </div>
        <div class="swiper-nav">
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></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}'>
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/header-01.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/header-02.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/header-03.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/header-05.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img class="w-100 h-100" src="../assets/img/projects.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>
</div>
JavaScript
<script src="vendors/swiper/swiper-bundle.min.js"></script>
CSS
<link src="vendors/swiper/swiper-bundle.min.css" rel="stylesheet" />