slick.jsのスライダーで両サイドをチラ見せする方法

当記事アイキャッチのようにスライダーで両サイドをチラ見せする方法を記します。

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

Contents

①通常のslickスライダーを作成する
②CenterModeを指定する
③CSSでスライド間隔を調整する
ソースコード全文

①通常のslickスライダーを作成する

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

<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-arrow{
        z-index:2!important;
    }
    .slider .slick-next{
        right:0!important;
    }
    .slider .slick-prev{
        left:0!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,         //自動再生
        dots: true,             //ドット
        infinite: true,         //ループ
        pauseOnHover: false,    //ホバーで止めない
    })
</script>

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

②CenterModeを指定する

centerModeオプションをtrueにすることで両サイドのスライドを見せることができます。
centerPaddingオプションでどれぐらい表示するかを決められます。

$('.slider').slick({
    autoplay: true,
    dots: true,
    infinite: true,
    pauseOnHover: false,
    centerMode:true,        //追記
    centerPadding:"20%",    //追記
})

両サイドのスライドが表示されました。

③CSSでスライド間隔を調整する

今のままではスライド間に隙間がなくくっついてしまっているので、間隔を調整します。
CSSに以下の記述を追加します。

.slider .slick-slide{
    margin-right: 1vw!important;
    margin-left: 1vw!important;
}

スライド間に隙間を作れました。

ソースコード全文

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

<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-arrow{
        z-index:2!important;
    }
    .slider .slick-next{
        right:0!important;
    }
    .slider .slick-prev{
        left:0!important;
    }
    .slick-slide{
        margin-right: 1vw!important;
        margin-left: 1vw!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,         //自動再生
        dots: true,             //ドット
        infinite: true,         //ループ
        pauseOnHover: false,    //ホバーで止めない
        centerMode:true,        //両サイドを表示
        centerPadding:"20%",    //両サイドをどれぐらい表示するか
    })
</script>

以上、Slickスライダーで両サイドをチラ見セする方法でした。

slick.jsで実装できる様々なスライダーを紹介しているので興味があればご参考ください！
slick.jsでよく作るスライダーを10種類紹介