[Swiper.js]How to create card slider

In this article, I am going to describe about how to create card slider with swiper.js.
I think this is one of the function that slick.js does not have.

I’ｍ going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So if you are new to Swiper.js, firstly check the below article.
[Swiper]How to create simple responsive slider with swiper.js

Contents

①Create a normal swiper slider
②Make the slider card
③Decorate the looks by CSS
The full text of source cord

①Create a normal swiper slider

To make it clear, we will create normal swiper slider first and then make changes.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
    .sample-slider{
        width:50%;
    }
    .sample-slider img{
        width: 100%;
    }
</style>

<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
        <div class="swiper-slide"><img src="./img/sample4.png"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script>
    const swiper = new Swiper('.sample-slider', {
        pagination: {                       //pagination(dots)
            el: '.swiper-pagination',
        },
        navigation: {                       //navigation(arrows)
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

Now we can see normal slider.

②Make the slider card

We can make the slider card by setting effect: “card”.
Intidentally, lets set grabCursor option as well.

const swiper = new Swiper('.sample-slider', {
    effect: "cards",    //added
    grabCursor: true,   //added
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

The slider has become card!

③Decorate the looks by CSS

Round the corners of slides by adding css as below.

.sample-slider{
    width:70%;
}
.sample-slider .swiper-slide{   /* added */
    border-radius: 20px;        /* added */
}                               /* added */
.sample-slider img{
    width: 100%;
    vertical-align: bottom;     /* added */
}

The corners of slides have been rounded!

The full text of source cord

In the end,I put the full text of surce cord.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
    .sample-slider{
        width:70%;
    }
    .sample-slider .swiper-slide{
        border-radius: 20px;
    }
    .sample-slider img{
        width: 100%;
        vertical-align: bottom;
    }
</style>


<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
        <div class="swiper-slide"><img src="./img/sample4.png"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>


<script>
    const swiper = new Swiper('.sample-slider', {
        effect: "cards",                    //make slider card
        grabCursor: true,                   //grab cursor
        pagination: {                       //pagination(dots)
            el: '.swiper-pagination',
        },
        navigation: {                       //navigation(arrows)
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

That is all,it was about how to create card slider by swiper.js.

There are the other sliders which can be made by effect option.
[Swiper.js]How to create cube slider
[Swiper.js]How to create coverflow slider
[Swiper.js]How to create flip slider

If you are interested in how various slider can be made by swiper.js, please refer below article!
Swiper Demo 16 Slider