【slick】slickをwidth100%で使うと謎の余白が右にできてしまうこと・画像が左寄せになることへの対策

overflow:hiddenで隠してやる

次のようなHTMLを書いて、sliderにslickを適応させてやった時、widthを100%にすると謎の余白が右に生まれます。

 <div class="main-visual">
        <ul class="slider">
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
        </ul>
 </div>

overflow:hidden;を指定してやると見事隠れます。

.main-visual{
  overflow: hidden;
}

画像を中央寄せする方法はmargin:0 autoを使う

slickの謎仕様なのですが、画像がcentermodeでtrueにしても、左寄せになっています。中央にするためには、margin:0 auto;を使います。これはslickではimg要素はblock要素として定義されているためです。

.main-visual img{
  margin:0 auto;
}

これで一件落着ですね。