slick slider 横幅100%の時に画像を中央に寄せて表示する

Question

slick sliderで横幅100%/縦600pxのレスポンシブのスライダーを作成したいのですが、各スライドと画像は横幅1200px/縦600pxで最大値を固定したいです。

横幅1200px以上の大きいディスプレイで確認すると、画像を1200px × 600pxで固定しているのでスライドに余白がでてしまいます。
左右をチラ見せするためにcenterMode: true,をしているのですが、
ウィンドウを大きくした際に、各スライドの横幅最大値を1200pxにして常に中央配置にして左右に前後のスライダーを表示させるにはどうすればいいのでしょうか？
centerPaddingで余白を大きく取る方法しかないのでしょうか？
よろしくお願い致します。

htnl

<div class="top-slider">
 <div class="slide-elm">
  <a href="">
　 <img src="sample.jpg" alt="">
  </a>
 </div>
 <div class="slide-elm">
  <a href="">
　 <img src="sample.jpg" alt="">
　</a>
 </div>
 <div class="slide-elm">
  <a href="">
   <img src="sample.jpg" alt="">
  </a>
 </div>
</div>

JS

$('.top-slider').slick({
 infinite: true,
 autoplay: true,
 dots: false,
 slidesToShow: 1,
 slidesToScroll: 1,
 centerMode: true,
 responsive: [{
  breakpoint: 768,
  settings: {
  centerMode: false,
   }
  }]
 });

Comments

[yoshinavi]

スクリーンショット等を提示されると、疑問点の理解が深まりやすくなるので、回答もつきやすくなるかと思います。

[akihiro3]

余白が全角になっているので、半角に変更してください

[akihiro3]

あと、htmlとjsでコードを分けてください

[ysfree14]

画像の追加、余白調整、コードを分けました。どうぞよろしくお願い致します。

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

Answer 1

.slide-elm {
text-align:center;
}

じゃダメなのでしょうか？

Comments

[ysfree14]

回答ありがとうございます。
中央寄せにしても左右に白い余白が出てしまいます。
左右詰めた形で常に中央揃えにし、レスポンシブにも対応させたいです。

[退会済みユーザー]

こちらが調べた限りではcenterpaddingは両端の画像がでる量という使用方法ではないのでしょうか？

[ysfree14]

はい、そのようです。
その値を調整して、設置するしか方法はないのでしょうか？

[退会済みユーザー]

その方が一般にも使われているので良いかと...
逆にcenterpaddingを利用したくない理由があるのでしょうか？か？

[ysfree14]

質問させていただいたときにcenterpaddingで指定すると何故か右に若干寄ってしまったのですが、先ほど再度試したところ中央に表示させることができました。
centerpaddingで調整しようと思います、ありがとうございます。