Swiper - Documentation | Fluxo - Social Media Marketing Template by We Both

Swiper #

Free and most modern mobile touch slider with hardware accelerated transitions and native behavior.

For more detailed information and examples, see the official documentation: Swiper.

How it works #

Here is how the Swiper works with Fluxo:

Swiper will find the element with .swiper-container class.
Each slide item has .swiper-slide class.
All slide items are wrapped around .swiper-wrapper class.

How to Use #

Copy-paste the following css inside the <head> tag of your pages under  to give it a style.

<link rel="stylesheet" href="css/vendor/swiper.min.css">

Copy-paste the following <script> near the end of your pages under  to enable Swiper.

<script src="js/vendor/swiper.min.js"></script>

Copy-paste the following <script> near the end of your pages under  to initialize it.

<script src="js/init/wb.swiper-init.js"></script>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <svg class="bd-placeholder-img card-img-top" width="250" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="#41afff" width="100%" height="100%"/></svg>
    </div>
    <div class="swiper-slide">
      <svg class="bd-placeholder-img card-img-top" width="250" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="#52bbd3" width="100%" height="100%"/></svg>
    </div>
    <div class="swiper-slide">
      <svg class="bd-placeholder-img card-img-top" width="250" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="#0077b5" width="100%" height="100%"/></svg>
    </div>
  </div>
</div>

Pagination #

Add <div class="swiper-pagination"></div> below the end of .swiper-wrapper to display slide pagination.

Result
Code

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <svg class="bd-placeholder-img card-img-top" width="250" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="#41afff" width="100%" height="100%"/></svg>
    </div>
    <div class="swiper-slide">
      <svg class="bd-placeholder-img card-img-top" width="250" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="#52bbd3" width="100%" height="100%"/></svg>
    </div>
    <div class="swiper-slide">
      <svg class="bd-placeholder-img card-img-top" width="250" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="#0077b5" width="100%" height="100%"/></svg>
    </div>
  </div>
  <!-- Swiper pagination: -->
  <div class="swiper-pagination"></div>
</div>

Navigation #

Add <div class="swiper-button-prev"></div> and <div class="swiper-button-next"></div> below the end of .swiper-wrapper to display slide navigation. Furthermore, you can add button's shape class like .rounded.

Result
Code

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <svg class="bd-placeholder-img card-img-top" width="250" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="#41afff" width="100%" height="100%"/></svg>
    </div>
    <div class="swiper-slide">
      <svg class="bd-placeholder-img card-img-top" width="250" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="#52bbd3" width="100%" height="100%"/></svg>
    </div>
    <div class="swiper-slide">
      <svg class="bd-placeholder-img card-img-top" width="250" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="#0077b5" width="100%" height="100%"/></svg>
    </div>
  </div>
  <!-- Swiper navigation: -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>