Skip to main content

Slider

Square only

Swiper - 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.

Swiper docsarrow-right-1

Basic example

photo-86
photo-87
photo-88
photo-89
photo-90 
<div class="swiper">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-86.jpg" alt="photo-86" class="img-fluid w-100">
            </div>
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-87.jpg" alt="photo-87" class="img-fluid w-100">
            </div>
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-88.jpg" alt="photo-88" class="img-fluid w-100">
            </div>
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-89.jpg" alt="photo-89" class="img-fluid w-100">
            </div>
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-90.jpg" alt="photo-90" class="img-fluid w-100">
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end mt-3">
        <div class="swiper-btn swiper-btn-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
        <div class="swiper-btn swiper-btn-next ms-3" tabindex="0" role="button" aria-label="Next slide"></div>
    </div>
</div>

Multiple images

Just use data-options to change the default options, like slidesPerView, loop, spaceBetween, breakpoints etc.

photo-88
photo-89
photo-90
photo-86
photo-87
photo-88
photo-89
photo-90
photo-86
photo-87
photo-88 
<div class="swiper">
    <div class="swiper-container" data-options='{"slidesPerView": "1", "loop": true, "breakpoints": {"992": {"slidesPerView": 3}}}'>
    ...
    </div>
</div>

Navigation positioning

The navigation can be repositioned as desired.

photo-88
photo-89
photo-90
photo-86
photo-87
photo-88
photo-89
photo-90
photo-86
photo-87
photo-88 
<div class="position-absolute left-0 top-50 container d-flex justify-content-between">
    <div class="swiper-btn swiper-btn-prev ms-n4 ms-lg-n5" tabindex="0" role="button" aria-label="Previous slide"></div>
    <div class="swiper-btn swiper-btn-next me-n4 me-lg-n5" tabindex="0" role="button" aria-label="Next slide"></div>
</div>

Pagination

photo-86
photo-87
photo-88
photo-89
photo-90 
<div class="swiper-pagination"></div>

Dark slider

Add swiper-dark class to the slider and the navigation.

photo-88
photo-89
photo-90
photo-86
photo-87
photo-88
photo-89
photo-90
photo-86
photo-87
photo-88 
<div class="swiper">
    <div class="swiper-container swiper-dark">
    ...
    </div>

    <div class="swiper-dark">
        <div class="swiper-btn swiper-btn-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
        <div class="swiper-btn swiper-btn-next" tabindex="0" role="button" aria-label="Next slide"></div>
    </div>
</div>

Visible overflow

Changes the overflow visibililty of the viewport.

photo-86
photo-87
photo-88
photo-89
photo-90 
<div class="swiper">
    <div class="swiper-container container overflow-visible">
    ...
    </div>
</div>

Scaled

Add swiper-scaled class to make the active slide scaled.

photo-86
photo-87
photo-88
photo-89
photo-90 
<div class="swiper">
    <div class="swiper-container swiper-scaled">
    ...
    </div>
</div>

Thumbnails

Create another slider and add swiper-thumbs class to connect the two sliders.

photo-86
photo-87
photo-88
photo-89
photo-90
photo-86
photo-87
photo-88
photo-89
photo-90 
<div class="swiper">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-86.jpg" alt="photo-86" class="img-fluid w-100">
            </div>
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-87.jpg" alt="photo-87" class="img-fluid w-100">
            </div>
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-88.jpg" alt="photo-88" class="img-fluid w-100">
            </div>
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-89.jpg" alt="photo-89" class="img-fluid w-100">
            </div>
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-90.jpg" alt="photo-90" class="img-fluid w-100">
            </div>
        </div>
    </div>

    <div class="position-absolute left-0 top-50 container d-flex justify-content-between">
        <div class="swiper-btn swiper-btn-prev ms-n4 ms-lg-n5" tabindex="0" role="button" aria-label="Previous slide"></div>
        <div class="swiper-btn swiper-btn-next me-n4 me-lg-n5" tabindex="0" role="button" aria-label="Next slide"></div>
    </div>

    <div class="swiper-container swiper-thumbs">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-86.jpg" alt="photo-86" class="img-fluid w-100">
            </div>
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-87.jpg" alt="photo-87" class="img-fluid w-100">
            </div>
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-88.jpg" alt="photo-88" class="img-fluid w-100">
            </div>
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-89.jpg" alt="photo-89" class="img-fluid w-100">
            </div>
            <div class="swiper-slide">
                <img src="../assets/images/photos/photo-90.jpg" alt="photo-90" class="img-fluid w-100">
            </div>
        </div>
    </div>
</div>

Thumbnails - free move

Move the thumbnail slider freely.

photo-86
photo-87
photo-88
photo-89
photo-90
photo-86
photo-87
photo-88
photo-89
photo-90 
<div class="swiper">
    ...

    <div class="swiper-container swiper-thumbs" data-options='{"freeMode": true}'>
        ...
    </div>
</div>

Jump to