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:

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