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 swiper
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-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/1.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/2.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/3.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/4.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/5.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/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>
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-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/1.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/2.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/3.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/4.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/5.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/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>
Swiper without navigation

For Swiper without navigation simply remove the following html from your pug/HTML.

<div class="swiper-nav">
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-button-prev swiper-button-white"></div>
</div>
Swiper without navigation example
<div class="row">
  <div class="col-lg-12 mb-4 mb-lg-0">
    <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/1.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/2.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/3.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/4.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/5.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/6.jpg" alt="" /></div>
      </div>
    </div>
  </div>
</div>
Stylesheet
<link href="vendors/swiper/swiper-bundle.min.css" rel="stylesheet" />
Javascript
<script src="vendors/swiper/swiper-bundle.min.js"></script>

Thank you for creating with Falcon |
2021 © Themewagon

v3.2.0

customize