【Slick】縦方向にスライドするスライダーを作成

当記事では、自動で流れ続ける無限ループスライダーをslick.jsを使用して作成する方法を記します。
矢印やドットの位置を調整する方法も記します。

通常のslickスライダーはご理解されている前提で進めていきますので、
「slickスライダー初めて」という方はまずこちらからご参考に頂ければと思います。
slick.jsでシンプルなスライダーを実装する方法【たった4ステップです】

Contents

①ノーマルなスライダーを作成
②縦方向に動かす
③矢印の位置を調整する
④ドットの位置を調整する
ソースコード全文

①ノーマルなスライダーを作成

まずはノーマルなスライダーを作成します。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<style>
    .slider{
        width:70%;
        margin:0 auto;
    }
    .slider img{ width:100%; }
    .slider .slick-slide{ height:auto!important; }
    .slider .slick-prev{ left:0!important; }     
    .slider .slick-next{ right:0!important; }
    .slider .slick-arrow{ z-index:2!important; }
</style>


<div class="slider">   
    <div><img src="./img/slider_image1.png"></div>
    <div><img src="./img/slider_image2.png"></div>   
    <div><img src="./img/slider_image3.png"></div>
</div>


<script>
    $('.slider').slick({
        autoplay: true,         //自動再生
        autoplaySpeed: 2000,    //自動再生のスピード
        speed: 800,             //スライドスピード
        dots: true,             //スライド下のドット
        arrows: true,           //左右の矢印
    })
</script>

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

②縦方向に動かす

slickに用意されているverticalオプションでスライダーを縦方向に動かすことができます。
下記のようにslickのオプションにvertical:trueを追記するだけです。

$('.slider').slick({
    vertical: true,         //追記
    autoplay: true,
    autoplaySpeed: 2000,
    speed: 800,
    dots: true,
    arrows: true,
})

スライドが縦方向に動くようになりました！

オプションの指定だけで縦方向に切り替えられるのは素晴らしいのですが、矢印とドットはそのままです。
CSSでドットと矢印の位置を調整して、より縦方向スライダーっぽくしてみましょう。

③矢印の位置を調整する

.slider .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
    transform: rotate(90deg);
    top: initial;
    left: initial!important;
    right: 0!important;
}
.slider .slick-arrow:before{ font-size: 50px; }
.slider .slick-prev{ top: 0; }
.slider .slick-next{ bottom: 0; }
/*                  
.slider .slick-prev{ left:0!important; }      //削除
.slider .slick-next{ right:0!important; }     //削除
*/

矢印の位置がいい感じになりました。

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

.slider .slick-dots{
    width: 50px;
    right: 0;
    bottom: initial;
    top: 50%;
    transform: translateY(-50%);
}

ドットの位置がいい感じになりました。
縦方向スライダーの完成です！

ソースコード全文

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

<style>
    .slider{
        width:70%;
        margin:0 auto;
    }
    .slider img{ width:100%; }
    .slider .slick-slide{ height:auto!important; }
    .slider .slick-arrow{ z-index:2!important; }

    /* 矢印の位置を調整 */
    .slider .slick-arrow{
        width: initial!important;
        height: initial!important;
        z-index:2!important;
        transform: rotate(90deg);
        top: initial;
        left: initial!important;
        right: 0!important;
    }
    .slider .slick-arrow:before{ font-size: 50px; }
    .slider .slick-prev{ top: 0; }
    .slider .slick-next{ bottom: 0; }

    /* ドットの位置を調整 */
    .slider .slick-dots{
        width: 50px;
        right: 0;
        bottom: initial;
        top: 50%;
        transform: translateY(-50%);
    }
</style>


<div class="slider">   
    <div><img src="./img/slider_image1.png"></div>
    <div><img src="./img/slider_image2.png"></div>   
    <div><img src="./img/slider_image3.png"></div>
</div>


<script>
    $('.slider').slick({
        vertical: true,
        autoplay: true,
        autoplaySpeed: 2000,
        speed: 800,
        dots: true,
        arrows: true,
    })
</script>

以上、縦方向にスライドするスライダーをslick.jsで作成する方法でした。