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

slick show both sideSlick


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


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





①通常の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スライダーができました。

slider_image
slider_image
slider_image







②CenterModeを指定する

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

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

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

slider_image
slider_image
slider_image


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

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

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

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

slider_image
slider_image
slider_image





connaiconnai

ソースコード全文

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

<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種類紹介

コメント

タイトルとURLをコピーしました