[Swiper.js]How to create cube slider

In this article, I am going to describe about how to create cube 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 cube
③Erase the shadow
The full text of source code

①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', {
        loop: true,                         //loop
        autoplay: {                         //autoplay
            delay: 2000,  
        },   
        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 cube

Set effect option “cube” to make the slider cube.
Intidentally, lets set grabCursor option and speed option.

const swiper = new Swiper('.sample-slider', {
    loop: true,                         
    effect: "cube",                     //add(make slider cube
    grabCursor: true,                   //add(grab cursor
    speed: 1500,                        //add(slide speed
    autoplay: {                         
        delay: 2000,  
    },                   
    pagination: {                       
        el: '.swiper-pagination',
    },
    navigation: {                       
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

The slider has become cube.

③Erase the shadow

By setting shadow and slideShadows of cubeEffect false,we can erace the shadow of cube slider.

const swiper = new Swiper('.sample-slider', {
    loop: true,                         
    effect: "cube",  
    cubeEffect: {                       //add
        shadow: false,                  //add(erase shadow under slide
        slideShadows: false,            //add(erase shadow of slide
    },                                  //add
    grabCursor: true,                   
    speed: 1500,                        
    autoplay: {                         
        delay: 2000,  
    },                   
    pagination: {                       
        el: '.swiper-pagination',
    },
    navigation: {                       
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

The shadow has been erased.

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: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', {
        loop: true,                         //loop
        effect: "cube",                     //make slider cube
        cubeEffect: {
            shadow: false,                  //erase shadow under slide
            slideShadows: false,            //erase shadow of slide
        },
        grabCursor: true,                   //grab cursor
        speed: 1500,                        //slide speed
        autoplay: {                         //auto play
            delay: 2000,  
        },                   
        pagination: {                       //pagination(dots)
            el: '.swiper-pagination',
        },
        navigation: {                       //navigation(arrows)
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

That is all, it is about how to create cube slider with swiper.js.

There are the other sliders which can be made by effect option.
[Swiper.js]How to create card 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