【slick】一段階上のslickスライダーのご紹介
一段階上のslickの使い方
slickの基本的なカスタマイズ方法をご紹介しましたが、これからはより表現の幅を広げた応用編となります。サンプルのコードを用意しているので参考にして作ってみてください。
前後の画像が少し見えるスライダー
前後の画像が見えるようなスライドはオプション「centerMode」を使用します。前後の画像がどのくらい見せるかを設定する「centerPadding」と一緒に使うのが一般的。
1
2
3
4
5
6
7
|
[common.js]
$(‘.slick01’).slick({
centerMode: true,
centerPadding: ‘25%’,
});
|
centerPaddingはpxなど固定値でも大丈夫ですし、%やvwなど相対的に設定することも可能です。
ちなみに[centerPaddingの値 x 2]した幅がスライダー内の画像の幅以上になると何も見えなくなるのでご注意ください。
サイズがバラバラな画像を入れたスライダー(variableWidth)
ここまではスライダー内で使用した画像のサイズを統一させていました。ところがサイズが違う画像を入れたい!ということだってあるかもしれません。
そんなときに便利なのが「variableWidth」です。違う幅の画像を扱う場合は検討するとよいオプションです。
大きさがバラバラな画像で高さも揃えたい場合
「画像の高さをvwで指定して、最大高さと最小高さを設定する」
1
2
3
4
5
6
7
8
|
[common.css]
.slick–slide img {
height: 30vw; //ポイント1
max–height: 400px; //ポイント2
min–height: 350px; //ポイント2
}
|
これでほとんどのブラウザ(Chrome/ IE / Edge/ Firefox / Safari それぞれ最新版で検証しました)でも見え方は変わらず、きれいに表示されるようになります!ちなみにブラウザの幅を変えても崩れません!
ポイント1:高さをvwで指定する
pxでも%でもなく、vwで設定してください。(emでもCSSによったらできるかもしれません)。
pxだと画面幅を変えたときに崩れてしまう、%だと親要素の幅の影響を受けてしまうのでうまくいかない…となり、vwを設定すると画面幅の変更にも柔軟に対応できるようになります。例ではvwを30に設定していますがこれは1でも100でも大丈夫です。
「高さがvwで指定されてある」ということが重要になります。
ポイント2:最大高さと最小高さを設定する
高さをvwで設定すると、画面幅によって高さが変化します。幅が広くなればなるほど画像の高さも高く、狭くなればなるほど小さくなります。
そうなると見た目が非常に残念なことになるので、最大高さと最小高さを設定して、最低限の見た目を担保しようというわけです。
レスポンシブ対応のスライダーにする(responsive)
いよいよslickの強みであるレスポンシブ対応について解説していきます。
オプションは「responsive」を使います。そのまんまですね。コードは以下のような感じで書きます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
[common.js]
$(‘.slick01’).slick({
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
}
},
{
breakpoint: 640,
settings: {
arrows: false,
dots: false,
}
},
]
});
|
他のオプションと同様に「responsive: 値」という形式なのですが値の部分が配列になります。
その中にブレイクポイントとその時の設定を書いていきます。
なお、デフォルトではブレイクポイントの判定は「画面幅」ですが、オプション「respondTo: ‘slider’」と設定するとスライダーの幅で切り替えをすることもできます。