图像剪切光滑滑块

UsingadaptiveHeight选项裁剪旋转木马图像。请注意，我需要保持lazyLoad.

这是一个bug吗?我注意到，在幻灯片加载后，如果我调整窗口的大小，那么幻灯片图像就会完全显示出来。

示例代码可在这里获得&下面:https://jsfiddle.net/0fn6hLtd

<div class="slider">
<div>
<div class="image">
<img data-lazy="https://via.placeholder.com/560x150"/>
</div>
</div>
<div>
<div class="image">
<img data-lazy="https://via.placeholder.com/560x65"/>
</div>
</div>
<div>
<div class="image">
<img data-lazy="https://via.placeholder.com/560"/>
</div>
</div>
<div>
<div class="image">
<img data-lazy="https://via.placeholder.com/560x200"/>
</div>
</div>
</div>

设置>:

$('.slider').slick({
autoplay: true,
lazyLoad: 'ondemand',
infinite: true,
dots:true,
autoplaySpeed: 3000,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});

如果使用lazyloader，定义img的高度和宽度属性，使其可以在初始化时提取值。

$('.slider').slick({ autoplay: true, lazyLoad: 'ondemand', infinite: true, dots:true, autoplaySpeed: 3000, speed: 300, slidesToShow: 1, adaptiveHeight: true });
.slider { width: 560px; margin: 0 auto; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <h2>Slick Slider image is cropped with adaptiveHeight option. Clear cache to see it in action</h2> <div class="slider"> <div> <div class="image"> <img data-lazy="https://via.placeholder.com/560x150" height="150" width="560"/> </div> </div> <div> <div class="image"> <img data-lazy="https://via.placeholder.com/560x65" height="65" width="560"/> </div> </div> <div> <div class="image"> <img data-lazy="https://via.placeholder.com/560" height="560" width="560" /> </div> </div> <div> <div class="image"> <img data-lazy="https://via.placeholder.com/560x200" width="560" height="200" /> </div> </div> </div>

相关内容

最新更新

热门标签：