web-dev-qa-db-ja.com

Slick.jsカルーセルの中央に画像を配置する方法？

デフォルトでは、画像は左側に配置されます。設定の使用centerMode: true画像は左から数ピクセルの位置に配置され、次の画像のエッジは右側から右側に見えています。

enter image description here

使用される設定は次のとおりです。

for (var i in data.image_set) {
    sc.append('<div><img src="' + data.image_set[i].image + '" height="' + data.image_set[i].height + '" width="' + data.image_set[i].width + '"></div>');
}
sc.slick({
    dots: true,
    speed: 150,
    centerMode: true
});

スライダーで中央に1つの画像のみを表示し、オプションで前後の画像をそれぞれ左側と右側に部分的に表示したいとします。どうすればこれを達成できますか？

$(document).ready(function() {
  $('.sc').slick({
    dots: true,
    speed: 150,
    centerMode: true
  });
});
.sc img {
  height: calc(50vh - 100px);
  width: auto;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="sc">
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/I152rUr6ZBih.png?Signature=YFF9BB8dlAe7okzBHnRLWgYmFI8%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="900" width="674">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/HvAQty35hkNv.png?Signature=8HQKRBefUe%2B4f3sKX1vag78dCbQ%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/A6CZ5y6EUmNg.png?Signature=bsArQ0sX8o9mtgIISwtFPW2hzSM%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/EGO36t7pzBWp.png?Signature=txW6IP9KJ8bB0S%2B9QCYQTEy6Q%2BQ%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
</div>
javascriptcsscarouselslick.js
11
dvtan
$(document).ready(function() {
  $('.sc').slick({
    dots: true,
    speed: 150,
    centerMode: true
  });
});
.sc img {
  height: calc(50vh - 100px);
  width: auto;
  margin: 0 auto; /* it centers any block level element */
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="sc">
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/I152rUr6ZBih.png?Signature=YFF9BB8dlAe7okzBHnRLWgYmFI8%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="900" width="674">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/HvAQty35hkNv.png?Signature=8HQKRBefUe%2B4f3sKX1vag78dCbQ%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/A6CZ5y6EUmNg.png?Signature=bsArQ0sX8o9mtgIISwtFPW2hzSM%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/EGO36t7pzBWp.png?Signature=txW6IP9KJ8bB0S%2B9QCYQTEy6Q%2BQ%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
</div>
12
Deepak Yadav

この問題は、個々のスライドがカルーセルの幅に自動的にまたがるdivであるという事実に起因しますが、画像はdivを完全に埋めるのではなく、デフォルトではコンテナ内で左揃えになります。次のようなものをスタイルに追加してみてください。

.sc div { text-align: center; }
.sc img { margin: auto; }
10
jack