Phoenix

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="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/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 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/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 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

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

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>