Javascript Slick.js 如何在轮播中心对齐图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34670430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick.js how to align images in center of carousel?
提问by dvtan
By default, images align on the left. Using the setting centerMode: truethe images are aligned a few pixels from the left, and the edge of the next image is peeking from the right side, as shown:
默认情况下，图像在左侧对齐。使用该设置centerMode: true，图像从左侧对齐几个像素，下一个图像的边缘从右侧窥视，如图所示：
These are the settings used:
这些是使用的设置：
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
});
I would like to have the slider display only one image at the center, and optionally have the previous and next images partially visible to the left and right sides respectively. How can this be accomplished?
我想让滑块只在中心显示一个图像，并且可以选择让上一个和下一个图像分别在左侧和右侧部分可见。如何做到这一点？
$(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&Expires=1452236979&AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="900" width="674">
</div>
<div>
<img src="https://lespider-ca.s3.amazonaws.com:443/HvAQty35hkNv.png?Signature=8HQKRBefUe%2B4f3sKX1vag78dCbQ%3D&Expires=1452236979&AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
</div>
<div>
<img src="https://lespider-ca.s3.amazonaws.com:443/A6CZ5y6EUmNg.png?Signature=bsArQ0sX8o9mtgIISwtFPW2hzSM%3D&Expires=1452236979&AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
</div>
<div>
<img src="https://lespider-ca.s3.amazonaws.com:443/EGO36t7pzBWp.png?Signature=txW6IP9KJ8bB0S%2B9QCYQTEy6Q%2BQ%3D&Expires=1452236979&AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
</div>
</div>回答by Deepak Yadav
$(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&Expires=1452236979&AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="900" width="674">
</div>
<div>
<img src="https://lespider-ca.s3.amazonaws.com:443/HvAQty35hkNv.png?Signature=8HQKRBefUe%2B4f3sKX1vag78dCbQ%3D&Expires=1452236979&AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
</div>
<div>
<img src="https://lespider-ca.s3.amazonaws.com:443/A6CZ5y6EUmNg.png?Signature=bsArQ0sX8o9mtgIISwtFPW2hzSM%3D&Expires=1452236979&AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
</div>
<div>
<img src="https://lespider-ca.s3.amazonaws.com:443/EGO36t7pzBWp.png?Signature=txW6IP9KJ8bB0S%2B9QCYQTEy6Q%2BQ%3D&Expires=1452236979&AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
</div>
</div>回答by Hyman
The issue is coming from the fact that each individual slide is a div that automatically spans the width of the carousel, but the images do not fill the divs completely and, by default, are left-aligning inside their containers. Try adding something like this to your styles:
问题来自这样一个事实，即每个单独的幻灯片都是一个自动跨越轮播宽度的 div，但图像不会完全填充 div，并且默认情况下，在其容器内左对齐。尝试将这样的内容添加到您的样式中：
.sc div { text-align: center; }
.sc img { margin: auto; }
回答by Cezar Andrei Popescu
Had similar issues, when all the imgs didn't have the same height, they didnt align up into the slider:
find .slick-trackin your "slick.css" and change displayto flexand add align-items: center.
有类似的问题，当所有 imgs 的高度不同时，它们没有对齐到滑块中：.slick-track在“slick.css”中找到并更改display为flex并添加align-items: center.
