[Swiper.js]How to create card slider

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’m 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





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

slide_image1
slide_image2
slide_image3
slide_image3






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

slide_image1
slide_image2
slide_image3
slide_image3





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

slide_image1
slide_image2
slide_image3
slide_image3






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

You can subscribe by SNS

Sponcerd Link

Popular Posts

*