javascript 调整窗口大小时，光滑的滑块没有响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45939631/
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 slider not being responsive when resizing the window
提问by Reece
I have created a image slider in WordPress using slick slider. I am using center mode I want one image centered with one on each side slightly showing. But I am having a few problems. Firstly when I resize the window slick slider doesn't calculate the new image widths until I interact with the slider, this is problem is not present in the demo. Secondly the images on each side aren't showing like they should.
我使用光滑的滑块在 WordPress 中创建了一个图像滑块。我正在使用中心模式我想要一张图像居中，每边一个稍微显示。但是我遇到了一些问题。首先，当我调整窗口滑动滑块的大小时，在与滑块交互之前不会计算新的图像宽度，这是演示中不存在的问题。其次，每一侧的图像都没有像他们应该的那样显示。
https://codepen.io/Reece_Dev/pen/xLQwEb
https://codepen.io/Reece_Dev/pen/xLQwEb
$('.carousel').slick({
centerMode: true,
centerPadding: '0px',
slidesToShow: 1,
});
#container{
width: 100%;
}
.slick-slide img{
width: 80%;
height: auto;
max-width: 2000px;
}
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="carousel">
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_one2200.png"></div>
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_two2200.png"></div>
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_one2200.png"></div>
</div>
</div>
回答by Renzo Calla
回答by Dilan
Answer from slick creator, Ken Wheeler, himself:
来自圆滑的创作者 Ken Wheeler 本人的回答：
$('.slider-class').slick('setPosition');
$('.slider-class').slick('setPosition');
回答by Josh
Run the slickmethod on window resize to recalculate the image dimensions.
slick在窗口调整大小上运行该方法以重新计算图像尺寸。
$(window).on('resize orientationchange', function() {
$('.carousel').slick('resize');
});
回答by Reece
Turns out that all I needed was some css styles and to add the latest jQuery to wordpress. Check my codepen to see the css if you're have the same problem
原来我只需要一些 css 样式并将最新的 jQuery 添加到 wordpress。如果您有同样的问题，请检查我的 codepen 以查看 css
回答by Mike Gledhill
Here's the code I use to resize my slack carousel, whenever the browser window changes height.
这是我用来在浏览器窗口更改高度时调整松弛轮播大小的代码。
var MARGIN_TOP_BOTTOM = 15;
$(window).on('init resize', function () {
var newWindowHeight = $(this).height();
newWindowHeight -= (MARGIN_TOP_BOTTOM * 2);
$(".cssCarousel").css("margin", MARGIN_TOP_BOTTOM + "px 0px");
$(".slick-slide").css("height", newWindowHeight + "px");
$(".slick-slide img").css("height", newWindowHeight + "px");
});
As you can see, I leave a small (15px) gap at the top & bottom.
如您所见，我在顶部和底部留下了一个小的（15 像素）间隙。
