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 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,"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 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 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 |
2024 © Themewagon

v3.22.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.

RTL Mode

Switch your language direction

RTL Documentation
Fluid Layout

Toggle container layout system

Fluid Documentation
Navigation Position

Select a suitable navigation system for your web application

Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize