## 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 be placed after the `.swiper-container` element.

    <div class="swiper-theme-container">
      <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/30.jpg" alt="" /></div>
          <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/31.jpg" alt="" /></div>
          <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/32.jpg" alt="" /></div>
          <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/33.jpg" alt="" /></div>
          <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/34.jpg" alt="" /></div>
          <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/35.jpg" alt="" /></div>
        </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>

#### Swiper without thumbnail

For Swiper without thumbnail simply remove thumb options from your pug/HTML.

    <div class="swiper-theme-container">
      <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/30.jpg" alt="" /></div>
          <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/31.jpg" alt="" /></div>
          <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/32.jpg" alt="" /></div>
          <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/33.jpg" alt="" /></div>
          <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/34.jpg" alt="" /></div>
          <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/35.jpg" alt="" /></div>
        </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>

#### Swiper without navigation example

#### Stylesheet

    <pre><code class="language-html">&lt;link href=&quot;vendors/swiper/swiper-bundle.min.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>

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

#### Javascript

    <pre><code class="language-html">&lt;script src=&quot;vendors/swiper/swiper-bundle.min.js&quot;&gt;&lt;/script&gt;</code></pre>

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

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize