加载时堆叠图像 - 光滑

Stacking of images when loaded - Slick

本文关键字：光滑 图像 加载      更新时间：2023-09-26

我们正在为客户项目使用光滑的滑块，到目前为止它一直运行良好，但是我注意到了一些东西，我不知道这是一个错误还是我错过了什么。

加载光滑滑块

时，在视口中显示整个滑块之前，它不会正确加载，并且与页面滑块的一半堆叠在一起。然后整个滑块在视口中可见，它会跳回到它应该的样子，几乎就像它重新滑了自己一样。

下面是我的光滑滑块的代码

$('.css_slider').slick({
     infinite: true,
     speed: 500,
     fade: true,
     cssEase: 'linear',
     autoplay: true,
     autoplaySpeed : 8000,
     adaptiveHeight: true,
     dots: true
});

和图像看起来像这里的链接

我已经阅读了各个地方，并找到了这个链接Github链接来解决同一问题

但它对我不起作用。我仍然得到同样丑陋的效果。

请建议

您是否尝试过将函数延迟到加载 dom

？ 
$( window ).load(function() {
    $('.css_slider').slick({
     infinite: true,
     speed: 500,
     fade: true,
     cssEase: 'linear',
     autoplay: true,
     autoplaySpeed : 8000,
     adaptiveHeight: true,
     dots: true
    });
});

或者，如果这不起作用：

setTimeout(function(){
  $('.css_slider').slick({
     infinite: true,
     speed: 500,
     fade: true,
     cssEase: 'linear',
     autoplay: true,
     autoplaySpeed : 8000,
     adaptiveHeight: true,
     dots: true
    });
}, 2000)
相关文章：