🐷
Slick.jsをつかっていて遭遇する不具合の解決法
1. レスポンシブ表示で画像が表示されなくなる
原因
Slick.jsで生成されたDOMの親要素の、display
プロパティの値がflex
になっていると画像が表示されなくなる。
解決法
親要素のdisplay
プロパティの値をflex
以外にする
<!-- flexboxになっている親要素 -->
<div>
<!-- ↓Slick.jsで生成されたDOM -->
<div dir="ltr" class="slick-slider slick-initialized">
...
<div>
<div>
2. 画像の下に余白ができる
原因
Slick.jsで生成されたDOMの、親要素のline-height
プロパティが原因
解決法
line-height
プロパティの値を0
にする
Discussion