Swiper

Most modern mobile touch slider with hardware accelerated transitions.

Official Documentation

Usage

CSS

In order to use this plugin on your page you will need to include the following styles in the Page CSS area from the page’s head section:

<link rel="stylesheet" href="../../assets/libs/swiper/dist/css/swiper.min.css">

JS

In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:

<script src="../../assets/libs/swiper/dist/js/swiper.min.js"></script>

Initialization

Now, we need to add basic Swiper layout to our app:

Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600 
<div class="swiper-js-container">
    <div class="swiper-container" data-swiper-items="1" data-swiper-space-between="20" data-swiper-sm-items="2" data-swiper-sm-space-between="20" data-swiper-xl-items="3" data-swiper-xl-space-between="20">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
        </div>
    </div>
</div>

Options

Here is a list with the data-swiper-* attributes you can use in order to configure the swiper element without the need to modify any JavaScript file. Simply add the data-swiper-PARAMETER_NAME attribute on the .swiper-container div, where PARAMETER_NAME is one of the options listed in the table below (e.g data-swiper-items="3").

Parameter Type Default Description
direction string horizontal Could be ‘horizontal’ or ‘vertical’ (for vertical slider).
items number or "auto" 1 Number of slides per view (slides visible at the same time on slider’s container).

You can set different values for each existing breakpoint by adding: sm, md, lg and xl before the items parameter (e.g: data-swiper-sm-items="2").
space-between number 0 Distance between slides in px.

You can set different values for each existing breakpoint by adding: sm, md, lg and xl before the items parameter (e.g: data-swiper-sm-space-between="20").
initial-slide number 0 Index number of initial slide.).
centered-slides boolean false If true, then active slide will be centered, not always on the left side.
autoplay boolean false Object with autoplay parameters or boolean true to enable with default settings.
autoheight boolean false Set to true and slider wrapper will adopt its height to the height of the currently active slide.
effect string slide Tranisition effect. Could be “slide”, “fade”, “cube”, “coverflow” or “flip”.
paginationtype string bullets String with type of pagination. Can be “bullets”, “fraction”, “progressbar” or “custom”.

Examples

By default, Purpose comes with a few pre-defined Swiper styles and can be easily configured through some data-* attributes that will allow you to customize the items per slide, effect type, spacing and more.

Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600 
<div class="swiper-js-container">
    <div class="swiper-container" data-swiper-items="1" data-swiper-sm-items="2" data-swiper-xl-items="3" data-swiper-space-between="20" data-swiper-sm-space-between="20" data-swiper-xl-space-between="20">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</div>

Pagination

Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600 
<div class="swiper-js-container">
    <div class="swiper-container" data-swiper-items="1" data-swiper-sm-items="2" data-swiper-xl-items="3" data-swiper-space-between="20" data-swiper-sm-space-between="20"  data-swiper-xl-space-between="20">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
</div>

Progress bar

Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600 
<div class="swiper-js-container">
    <div class="swiper-container" data-swiper-items="1" data-swiper-sm-items="2" data-swiper-xl-items="3" data-swiper-space-between="20" data-swiper-sm-space-between="20"  data-swiper-xl-space-between="20" data-swiper-pagination-type="progressbar">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</div>

Centered slides

Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600 
<div class="swiper-js-container">
    <div class="swiper-container" data-swiper-items="1" data-swiper-sm-items="2" data-swiper-xl-items="3" data-swiper-space-between="20" data-swiper-sm-space-between="20"  data-swiper-xl-space-between="20" data-swiper-centered-slides="true">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
</div>

Fade

Placeholder 1200x600
Placeholder 1200x600
Placeholder 1200x600 
<div class="swiper-js-container">
    <div class="swiper-container" data-swiper-effect="fade">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="1200" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 1200x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">1200x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="1200" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 1200x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">1200x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="1200" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 1200x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">1200x600</text></svg>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
</div>

Coverflow

Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600
Placeholder 600x600 
<div class="swiper-js-container">
    <div class="swiper-container" data-swiper-items="1" data-swiper-sm-items="2" data-swiper-xl-items="3" data-swiper-space-between="20" data-swiper-sm-space-between="20"  data-swiper-xl-space-between="20" data-swiper-initial-slide="2" data-swiper-effect="coverflow">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
            <div class="swiper-slide">
                <svg class="bd-placeholder-img card-img-top" width="600" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x600</text></svg>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
</div>