【Swiper】縦方向に動くスライダーを作成して見た目を整える

vertical slider

当記事ではswiper.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: 42vw;
        height: 23vw;
    }
    .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>
    <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




縦方向のスライダーではswiperの一番親要素にheightを指定しないとうまく動かないので注意が必要です。ここではスライダーがレスポンシブになるようにwithとheightをvw(Viewport Width)で指定しています。





②スライダーを縦方向にする

swiperスライダーを縦方向に動かすには、directionオプションにverticalを指定します。

const swiper = new Swiper('.sample-slider', {
    loop: true,                         
    direction: "vertical",    //追加
    autoplay: {                        
        delay: 2000,  
    },   
    pagination: {                       
        el: '.swiper-pagination',
    },
    navigation: {                       
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

スライダーが縦方向に動くようになりました。
ドットは自動で右側にもっていってくれますが、矢印はそのままです。

slide_image1
slide_image2
slide_image3






③縦方向のスライダーの矢印をカスタマイズする

縦方向のスライダーで矢印が左右についているのは少し変なので、カスタマイズしましょう。
ここでは矢印を上下に置いて右側にもっていきます。

.sample-slider [class^=swiper-button]{
    transform:rotate(90deg);
    top: initial;
    left: initial;
    right: 10px;
    margin: 0;
}
.sample-slider .swiper-button-prev{
    top:0;
}
.sample-slider .swiper-button-next{
    bottom:0;
}

縦方向スライダーらしい矢印になりました。

slide_image1
slide_image2
slide_image3




④ドットの位置を調整する

下記のようにCSSを追記して、ドットの縦位置を矢印に合わせます。

.sample-slider .swiper-pagination{
    right:20px;
}

いい感じになりました!

slide_image1
slide_image2
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: 60vw;
        height: 33vw;
    }
    .sample-slider img{
        width: 100%;
    }
    .sample-slider [class^=swiper-button]{
        transform:rotate(90deg);
        top: initial;
        left: initial;
        right: 10px;
        margin: 0;
    }
    .sample-slider .swiper-button-prev{
        top:0;
    }
    .sample-slider .swiper-button-next{
        bottom:0;
    }
    .sample-slider .swiper-pagination{
        right:20px;
    }
</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>
    <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,                         //ループ
        direction: "vertical",              //スライドの向きを縦方向に
        autoplay: {                         //自動再生
            delay: 2000,  
        },                   
        pagination: {                       //ページネーション(ドット)
            el: '.swiper-pagination',
        },
        navigation: {                       //ナビゲーション(矢印)
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>



以上、swiper.jsを使用して、縦方向に動くスライダーを作成して見た目を整える方法でした。


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

スポンサーリンク

You can subscribe by SNS

スポンサーリンク

コメントを残す

*