[slick.js]各要素を任意の幅に指定する方法

マニュアルに書いてあるんだけどね。

どういうことか。
variableWidth を使う

どういうことか。

例えば画面幅いっぱいにスライドを設置するとして。その領域内に複数の要素が設置されている。ブラウザの幅が狭くなった時、要素の幅はそのままで表示される数が減っていく感じにしたい。通常のままで幅を狭めると設定した枚数を守るため、幅は自動的に増減する。どうしたらいいんですかね、という話。

読める程度のサイズでひたすら並べたいって感じの、PCだと活用シーンが多そうな構成。

Amazonのトップページの「おすすめ商品と人気商品」がイメージに近い。

variableWidth を使う

これ。

variableWidth | slick - にほんご。

こうなってるとして

<div class="Slider">
    <div class="slide"><img src="hogehoge.jpg" alt=""></div>
    <div class="slide"><img src="hogehoge.jpg" alt=""></div>
    <div class="slide"><img src="hogehoge.jpg" alt=""></div>
    <div class="slide"><img src="hogehoge.jpg" alt=""></div>
    <div class="slide"><img src="hogehoge.jpg" alt=""></div>
</div>

こうして

#Slider .slide{
    width: 360px;
}
#Slider .slide img{
    max-width: 100%;
    height: auto;
}

こう。

$(function(){
    $('#Slider').slick({
        arrows: true,
        dots: false,
        speed: 1000,
        autoplaySpeed: 10000,
        autoplay: true,
        swipe: true,
        pauseOnHover: false,
        variableWidth: true,
    });
});

当然だけど要素には%じゃなくてpxとか実数値を指定する。今回は一括だけど個別でそれぞれの幅を指定してもいい。

breakpointを活用するとかで切り替えができるんで、作ってしまったらいじりようがないって詰みにはならない。