How to build a carousel image slider with swiper.js

Anjan18 — Tue, 08 Feb 2022 01:53:52 +0000

In this blog, we will learn about swiper.js by building a simple carousel image slider app.

Video Tutorial

I have made a video about this on my youtube channel.

Please like and subscribe to my channel. It motivates me to create more content like this.

Demo

Setup

<head>
    <link
        rel="stylesheet"
        href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
    />
</head>

<body>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
</body>

Html Layout

<div class="container">
    <!-- main swiper container -->
    <div class="swiper">

    <!-- wrapper for slide -->
        <div class="swiper-wrapper">

        <!-- single slide -->
            <div class="swiper-slide">
                <div class="image__wrapper">
                    <img src="images/1.jpg" alt="" />
                </div>
            </div>

            <div class="swiper-slide">
                <div class="image__wrapper">
                    <img src="images/2.jpg" alt="" />
                </div>
            </div>

            <div class="swiper-slide">
                <div class="image__wrapper">
                    <img src="images/3.jpg" alt="" />
                </div>
            </div>

            <div class="swiper-slide">
                <div class="image__wrapper">
                    <img src="images/4.jpg" alt="" />
                </div>
            </div>

            <div class="swiper-slide">
                <div class="image__wrapper">
                    <img src="images/5.jpg" alt="" />
                </div>
            </div>

            <div class="swiper-slide">
                <div class="image__wrapper">
                    <img src="images/6.jpg" alt="" />
                </div>
            </div>
        </div>

        <!-- pagination -->
        <div class="swiper-pagination"></div>

        <!-- navigation buttton -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    max-width: 100vw;
    overflow-x: hidden;
}

.container {
    background-color: #292929;
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.swiper {
    width: 80%;
}

.image__wrapper {
    width: 100%;
    position: relative;
    padding-top: 56.25%;
}

.image__wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

Explanation:

we have a main swiper container. Then a wrapper for all the slides.
All the images are responsive by maintaining a specific aspect ratio. If you want to learn how to do that, please watch the following video.

const swiper = new Swiper('.swiper', {
    loop: true, // creates a infinite loop of slides
    navigation: { // activate navigation with navigation buttons
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {// activate paginations
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true,
    },

    // keyboard and mousewheel navigation
    keyboard: true,
    mousewheel: true,

    // for other than sliding effect

    // effect: 'creative',
    // creativeEffect: {
    //  prev: {
    //      // will set `translateZ(-400px)` on previous slides
    //      translate: [0, 0, -400],
    //  },
    //  next: {
    //      // will set `translateX(100%)` on next slides
    //      translate: ['100%', 0, 0],
    //  },
    // },
    // effect: 'coverflow',
})