前回まで
前回は、シンプルなスライダーを実装しました。
今回は、公式ドキュメントのdemosに載っているCenter Modeを実装していきたいと思います。
Center Modeってどんな？
slick 公式ドキュメント によると、currentなスライドの両端に、前後のスライドがちょっと見えてるようなデザインですね。
前後にちょぴっと見えるおかげで、これがスライダーなんだなとわかりやすいですね。
今回の目標
EDIT ON CODEPENボタンで拡大して見てください
See the Pen my-slick003 by yoruokamix (@Kei-Aoyama) on CodePen.
記事に書いたところからちょっちspeedとかいじってあります。
学習環境
ディレクトリ構造
.
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
├── slick/
│ ├── slick.js
│ ├── slick.css
│ ├── slick-theme.css
│ └── …
└── img/
├── sample01.jpg
├── sample02.jpg
└── sample03.jpg
最低限のリセットCSS+α
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
/* 場合によっては上書きすることになるが一応入れておく */
img{
width: 100%;
}
注意
リセットCSSは実際にslickを導入する環境に合わせる。
あとからリセットCSSを追加したり削除したりすると見た目が崩れることがあるので注意。
その場合、この記事の見た目と多少の違いが出ることがあります。
実際に書いてみましょう
slickの導入
記事①②を参考にslickを読み込んでください。
HTML
<div class="my-slick">
<div><img src="./img/sample01.jpg" alt="スライド01"></div>
<div><img src="./img/sample02.jpg" alt="スライド02"></div>
<div><img src="./img/sample03.jpg" alt="スライド03"></div>
</div>
画面幅によって表示する画像を変えたい方は、pictureタグを使ってください。
css
記事②と同じ設定にしておきます。
body{
background: #ccc;
}
.my-slick{
width: calc(100% - 100px);
margin: 0 auto;
}
.my-slick img{
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
js
$(function(){
$('.my-slick').slick({
//setting-name: setting-value
});
});
新しく出てくるプロパティ
| setting-name | setting-value | 説明 |
|---|---|---|
| centerMode | true | centerModeを使う |
| centerPadding | 任意の数値(px or %) | centerMode時の左右のpadding。 ダブルクオーテーションを付ける。 |
$(function(){
$('.my-slick').slick({
//setting-name: setting-value
autoplay: true,
centerMode: true,
centerPadding:"40px"
});
});
結果
うーん、書いた通りにはなってるんだけど、なんか惜しい！
惜しいのでとりあえず検証ツール
公式ドキュメントだと、スライドとスライドの間に余白があるんですね。
どうやらmarginとpaddingが付いているらしい。
classとCSSを書き足す
<div class="my-slick">
<div class="my-slick-item"><img src="./img/sample01.jpg" alt="スライド02"></div>
<div class="my-slick-item"><img src="./img/sample02.jpg" alt="スライド02"></div>
<div class="my-slick-item"><img src="./img/sample03.jpg" alt="スライド02"></div>
</div>
.my-slick-item{
padding: 20px;
}
さらに、centerPaddingをもう少し大きめにすると見栄えが良くなります。
結果
だいぶいい感じになったのではないでしょうか？？
さらにdemoに近づける
demoでは一度に３枚のスライドを見せる設定になっているので、slidesToShowを設定します。
$(function(){
$('.my-slick').slick({
//setting-name: setting-value
autoplay: true,
centerMode: true,
centerPadding: "80px",
slidesToShow: 3
});
});
スライドアイテムが３つしかないとイマイチわかりづらいので、とりあえずコピペでスライドアイテムを増やしてください。
結果
どんなもんだい。
responsiveプロパティを使ってみよう
responsiveプロパティを使うと、ブレークポイントごとに表示する枚数や矢印の有無などを設定することができます。
書き方
$(function(){
$('.my-slick').slick({
//setting-name: setting-value
autoplay: true,
centerMode: true,
centerPadding: "80px",
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
responsive部分のみ抜粋
responsive: [
{
//ブレークポイント
breakpoint: 768,
//ブレークポイント以下のときは以下のsettingsを適用する
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
} //settingsの閉じ括弧
} //ブレークポイントの閉じ括弧 bpを複数指定するときはここにカンマを入れて続ける
] //responsiveの閉じ括弧
arrows:falseにしたときに、左右の余白が残ったままになって見栄えが悪いのですが、そのあたりはCSSのメディアクエリで調整します。（割愛）
おまけ
公式ドキュメントのdemoでは現在のスライド（中央に来ているもの）が大きくなっていると思います。
これもCSS側で対応します。
現在のスライドには.slick-currentというclassが付与されます。
それを踏まえてCSSを書くと……
.my-slick img{
/*（省略）*/
/* ぬるっと動かしたいときはこれも追加。slickのプロパティspeedと揃えると見栄えよい。 */
transition-duration: 300ms;
}
.my-slick .slick-current img{
transform:scale(1.1);
}
あんまり爆速でスライドを切り替えると、カクッと大きくなってしまうことがありますが、気になる人は自動再生のみにするとかで対応してください。
まとめ
今回は、centerModeとresponsiveプロパティについて勉強をしました。
slickシリーズは次回で最後にしようと思います。
次回は、demosの中にある、Slider Syncingをやっていきたいと思います