调整窗口大小时，光滑的滑块无响应 [英] Slick slider not being responsive when resizing the window

问题描述

我已经使用光滑的滑块在WordPress中创建了图像滑块.我使用的是居中模式，我希望一幅图像居中显示，每侧略微显示一幅.但是我有一些问题.首先，当我调整窗口平滑滑块的大小时，直到与滑块进行交互之前，它才计算新的图像宽度，这是演示中不存在的问题.其次，每侧的图像都没有显示出来.

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.

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>

推荐答案

codepen 寻找窗口调整大小事件并添加此

codepen look for the window resize event an add this

$(window).resize(function(){
  $('.my-slider')[0].slick.refresh();
});

这篇关于调整窗口大小时，光滑的滑块无响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！