Swipers
Helper for swiper.js
This page is the documentation for my-swipers.js, a helper for swiper.js
Installation
Download and apply the following markup:
- Download swiper-bundle.min.css
- Download swiper-bundle-goa.css
- Download swiper-bundle.min.js
- Download my-swipers.js
<!-- HEAD part -->
<head>
<link rel="stylesheet" href="path/to/swiper-bundle.min.css">
<link rel="stylesheet" href="path/to/swiper-bundle-goa.css">
</head>
<body>
<!-- Same markup as swiper.js with a custom attribute my-swiper="NAME_OF_THE_SETTINGS" -->
<div class="swiper" my-swiper="base">
<div class="swiper-wrapper">
<div class="swiper-slide">
content
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Just before </body> -->
<script src="/path/to/swiper-bundle.min.js"></script>
<script src="/path/to/my-swipers.js"></script>
</body>
my-swipers.js uses the same markup as swiper.js adding a custom attribute my-swiper="NAME_OF_THE_SETTINGS"
. The value NAME_OF_THE_SETTINGS
is a object contained into the file my-swipers.js
: mySwipers.defaults.options
which contains presets.
Basic usage
This basic example uses the presets/settings called base
available into my-swipers.js
: mySwipers.defaults.options
<div class="swiper" my-swiper="base">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://wsrv.nl/?url=https://i.ibb.co/1JLc7Gg/car-citadine.png&w=100&output=webp&q=20&bg=transparent"
data-src="https://wsrv.nl/?url=https://i.ibb.co/1JLc7Gg/car-citadine.png&output=webp&q=40&bg=transparent"
alt="Image 1"
class="swiper-lazy u-w-100">
</div>
<div class="swiper-slide">
<img src="https://wsrv.nl/?url=https://i.ibb.co/jGgMswn/car-suv.png&w=100&output=webp&q=20&bg=transparent"
data-src="https://wsrv.nl/?url=https://i.ibb.co/jGgMswn/car-suv.png&output=webp&q=40&bg=transparent"
alt="Image 2"
class="swiper-lazy u-w-100">
</div>
<div class="swiper-slide">
<img src="https://wsrv.nl/?url=https://i.ibb.co/dsT2NVK/car-utilitaire.png&w=100&output=webp&q=20&bg=transparent"
data-src="https://wsrv.nl/?url=https://i.ibb.co/dsT2NVK/car-utilitaire.png&output=webp&q=40&bg=transparent"
alt="Image 3"
class="swiper-lazy u-w-100">
</div>
<div class="swiper-slide">
<img src="https://wsrv.nl/?url=https://i.ibb.co/Yh2ngrS/car-electrique.png&w=100&output=webp&q=20&bg=transparent"
data-src="https://wsrv.nl/?url=https://i.ibb.co/Yh2ngrS/car-electrique.png&output=webp&q=40&bg=transparent"
alt="Image 4"
class="swiper-lazy u-w-100">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- DEMO ONLY -->
<style>
body {
margin: auto;
max-width: 350px;
}
</style>
Methods
Every instance of Swiper is stored with its ID as key into an object in mySwipers.instances
. Each instance can use the entire Swiper API