[slick.js]左右ちら見せレスポンシブのトップページ用スライド構成案

レスポンシブ対応。

PCだけ左右ちら見せ（レスポンシブ対応）

<div class="slider">
    <div class="slide"><img src="***"></div>
    ︙
</div>

.slider .slide img{
    max-width: 1200px;
    width: 100%;
    height: auto;
    display: block;
}
@media screen and (max-width: 1199.98px){
    .slider .slide img{
        max-width: 100%;
    }
}

$('.slider').slick({
    arrows: false,
    speed: 500,
    autoplaySpeed: 10000,
    cssEase: 'linear',
    autoplay: true,
    slidesToScroll: 1,
    variableWidth: true,
    centerMode: true,
    swipe: true,
    infinite: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
    responsive: [{
        breakpoint: 1199.98,
        settings: {
            centerMode: false,
            variableWidth: false,
        }
    }]
});

「variableWidth」「centerMode」が肝になる。

PC環境だと幅1200pxで画像を表示、左右には前後の画像をちら見せさせる。ブラウザ幅が1200pxを割ったらちら見せを無くして、幅に合わせて画像サイズを調整。

これの活用ポイントとして、ページ内のコンテンツの最大幅と画像幅を合わせているところにある。スライド自体はブラウザ幅に合わせてるけど、メインとなる部分は以下のコンテンツと幅を合わせてるので気持ち悪いズレは起きない。大枠でのグリッドシステムともいえる。

注意点として、cssを入れてなければスライドの幅は画像自体の幅に準拠する。今回で言う1200pxは画像サイズを間違えなければ問題ないのだけど、前例があるにも関わらずサイズを守らないケースは普通にある。cssにmax-widthを入れることで最大サイズを指定できるんで、保険として入れておく。そもそも縦横比が間違ってたら話にならないけども。