Slickで slidesToShow を使って複数のアイテムを並べたとき、スライド間の余白をどう作るのがベストか？
いろいろ試した結果、一番確実でキレイに収まる方法を紹介します。
結論：これがベストプラクティス！
.slick-list {
margin: 0 -15px;
}
.slick-slide {
margin: 0 15px;
}
なぜこの方法が良いのか？
● .slick-slide に margin を指定することで、スライド間に適切な間隔を作れる
● .slick-list に margin を指定することで、余白を相殺してレイアウトのズレを防ぐ
● レスポンシブ対応がしやすい
● Slick のデフォルトの動作を壊さない
Slick のオプションで余白を作れないの？
Slickには直接スライド間の間隔を設定するオプションは ない ので、CSSで対応する必要があります。
試した方法とその結果はこちら。
1. Slick のオプションを調整する → 失敗
slidesToShow や slidesToScroll などでは余白を作れない
2. .slick-track { gap: 15px; } を使う → 失敗
Slick 1.8.1 では .slick-track の display は block のままなので gap は効かない
3. .slick-slide { padding: 0 15px; } を使う → 一応OK
スライド間の余白はできるが、.slick-track の余白調整が必要になる
4. .slick-slide { margin: 0 15px; } と .slick-list { margin: 0 -15px; } を使う → 成功！
スライド間に均等な間隔ができ、端もキレイに揃う
端がずれる問題を防ぐ
.slick-slide に margin を設定すると、スライダーの 端に余白ができてしまう ことがある。
それを防ぐために、.slick-list に margin: 0 -15px; を指定することで、余計な余白を相殺してデザインを崩さないようにする。
.slick-list {
margin: 0 -15px;
}
.slick-slide {
margin: 0 15px;
}
この方法なら、スライダーの端がピッタリ揃って、余白もキレイに整う！
レスポンシブ対応も簡単
画面サイズによってスライド間の余白を調整したい場合は、media queries で margin を変更するだけ。
media (max-width: 768px) {
.slick-slide {
margin: 0 10px;
}
.slick-list {
margin: 0 -10px;
}
}
小さい画面では余白を減らして、デザインを最適化できる！
まとめ
● Slick には余白を設定するオプションがない ので、CSS で調整する必要がある
● 最も確実な方法は .slick-slide に margin をつけ、.slick-list で相殺すること
● レスポンシブ対応も簡単にできる
● コンテンツの端がキレイに収まる！
いろいろ試した結果、この方法が一番スッキリ＆シンプルでした。
Slick でスライド間の余白に悩んでいる人は、ぜひこの方法を試してみてください！
