Slick でアイテムの間に間隔を作るベストプラクティス
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 { marg
0
