【Swiper.js】キューブスライダーを作成する

cube slider

当記事ではswiper.jsを使用して立体的なキューブスライダーを作成する方法を記します。
swiper.jsのオプションに用意されており、slick.jsにはおそらくない機能のひとつだと思います。


通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。
Swiper.jsでスライダーを実装する




①通常のSwiperスライダーを作成

わかりやすいように、最初に通常のSwiperスライダーを作成して、そこから変更を加えていきます。

<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,                         //ループ
        autoplay: {                         //自動再生
            delay: 2000,  
        },   
        pagination: {                       //ページネーション(ドット)
            el: '.swiper-pagination',
        },
        navigation: {                       //ナビゲーション(矢印)
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

通常のスライダーができました。

slide_image1
slide_image2
slide_image3
slide_image3





②スライダーをキューブ型にする

スライダーをキューブ型にするには、オプションにeffect: “cube” を指定します。
ついでにカーソルとスライドスピードも指定しておきます。

const swiper = new Swiper('.sample-slider', {
    loop: true,                         
    effect: "cube",                     //追加(スライダーをキューブ型に
    grabCursor: true,                   //追加(カーソルを掴む動作に
    speed: 1500,                        //追加(スライドスピード
    autoplay: {                         
        delay: 2000,  
    },                   
    pagination: {                       
        el: '.swiper-pagination',
    },
    navigation: {                       
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

スライダーをキューブ型にできました!

slide_image1
slide_image2
slide_image3
slide_image3





③影を消してみる

cubeEffectshadowslideShadowsをfalseにすることで、キューブスライダーの影を消すことができます。

const swiper = new Swiper('.sample-slider', {
    loop: true,                         
    effect: "cube",  
    cubeEffect: {                       //追加
        shadow: false,                  //追加(スライド下の影を無効に
        slideShadows: false,            //追加(スライドの影を無効に
    },                                  //追加
    grabCursor: true,                   
    speed: 1500,                        
    autoplay: {                         
        delay: 2000,  
    },                   
    pagination: {                       
        el: '.swiper-pagination',
    },
    navigation: {                       
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

影が消えました!

slide_image1
slide_image2
slide_image3
slide_image3





ソースコード全文

最後にソースコードを全文載せておきます。

<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,                         //ループ
        effect: "cube",                     //スライダーをキューブにする
        cubeEffect: {
            shadow: false,                  //スライド下の影を無効に
            slideShadows: false,            //スライドの影を無効に
        },
        grabCursor: true,                   //カーソルを掴む動作に
        speed: 1500,                        //スライドスピード
        autoplay: {                         //自動再生
            delay: 2000,  
        },                   
        pagination: {                       //ページネーション(ドット)
            el: '.swiper-pagination',
        },
        navigation: {                       //ナビゲーション(矢印)
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>




以上、swiper.jsを使用してキューブスライダーを作成する方法でした。


effectオプションを使用して作成できるスライダーは他にも下記のようなものがあります。
【Swiper.js】カードスライダーを作成する
【Swiper.js】カバーフロースライダーを作成する
【Swiper.js】フリップスライダーを作成する


また、下記ではSwiperスライダーの様々なカスタマイズ方法を記しているのでぜひ覗いてみてください!
Swiperスライダーのデモ16選

You can subscribe by SNS

スポンサーリンク

人気記事

*