[slick.js]スライド間に余白を付ける方法

端的に言うと、jsにその設定はない。

やりたいこと
仕様のおさらい
余白はCSSでつける

やりたいこと

slick.jsでスライダーを作る。

複数枚のスライドを並べる構成にしたい。スライドとスライドの間には指定した間隔を空けたい。

間隔を空けるにはどうしたら良いのって話。

仕様のおさらい

slick.jsにはスライド同士の間隔を空けるオプションは無い。それっぽいものに「centerPadding」があるけど、これは左右でちら見せするスライドをどれだけ見せるかって内容なので全くもって関係がない。

centerPadding | slick - にほんご。

余白はCSSでつける

こういう感じで作ったとする。

<div class="slider">
    <div class="slide"><img src="***" alt=""></div>
    <div class="slide"><img src="***" alt=""></div>
    <div class="slide"><img src="***" alt=""></div>
</div>

こんな感じになる。

.slider .slide{
  margin: 10px;
}

スライダーに関わる要素に直接書くのはあまり気持ちのいいものではないので自分はこんな感じで作る。

<div class="slider">
    <div class="slide"><div class="inner"><img src="***" alt=""></div></div>
    <div class="slide"><div class="inner"><img src="***" alt=""></div></div>
    <div class="slide"><div class="inner"><img src="***" alt=""></div></div>
</div>

<style>
.slider .slide .inner{
  padding: 10px 5px;
}
</style>

直接書いてmarginにした方が余白が重なるから調整も楽だというね。わざわざ面倒なことをやってる自覚はある。