我使用光滑滑块在 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>
codepen https://codepen.io/RACCH/pen/JyeGJO查找窗口调整大小事件并添加此事件
$(window).resize(function(){
$('.my-slider')[0].slick.refresh();
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)