[Swiper.js]How to create coverflow slider

coverflow slider

In this article, I am going to describe about how to create coverflow slider such as the eyecatch of this article by using swiper.js.



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:70%;
    }
    .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', {
        loop: true,                         //loop
        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





②Change the number of shown items

We can hange the number of shown items by slidesPerView option.
Let’s do centering the first slide by centeredSlides option as well.

const swiper = new Swiper('.sample-slider', {
    loop: true,
    slidesPerView: 3,       //add(how many slides to show)
    centeredSlides: true,   //add(centering the first slide)
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})
slide_image1
slide_image2
slide_image3
slide_image3






③Apply the coverflow effect

We can apply the coverflow effect by adding effect: “coverflow” to the swiper ooption as below.

const swiper = new Swiper('.sample-slider', {
    loop: true,
    effect: "coverflow",    //add(applying the coverflow effect)
    slidesPerView: 3,
    centeredSlides: true,
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

The coverflow slider has been completed!

slide_image1
slide_image2
slide_image3
slide_image3






The full text of source code

In the end, I put the full text of source code.

<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 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', {
        loop: true,                         //loop
        effect: "coverflow",                //applying the coverflow effect
        slidesPerView: 3,                   //how many slides to show
        centeredSlides: true,               //centering the first slide
        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 coverflow 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 card 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

*