Slick.js如何在旋转木马中心对齐图像？

Question

默认情况下，图像在左侧对齐。使用设置centerMode: true，图像从左侧对齐几个像素，下一个图像的边缘从右侧窥视，如图所示：

这些是使用的设置：

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
});

我想让滑块在中央只显示一个图像，并且可选地分别在左侧和右侧部分可见前一图像和下一图像。如何实现这一目标？

$(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>

Answer 1

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.sc').slick({
    dots: true,
    speed: 150,
    centerMode: true
  });
});

＆＃13;

.sc img {
  height: calc(50vh - 100px);
  width: auto;
  margin: 0 auto; /* it centers any block level element */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题来自这样一个事实：每个单独的幻灯片都是一个自动跨越轮播宽度的div，但图像不会完全填充div，默认情况下，它们在容器内左对齐。尝试在样式中添加这样的内容：

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

Answer 3

有类似的问题，当所有img的高度都不相同时，它们并没有与滑块对齐： 在您的“ slick.css”中找到.slick-track，并将display更改为flex，然后添加align-items: center。