### 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>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### 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