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にする