javascript - 加载时堆叠图像 - Slick

Question

我们正在为一个客户元素使用 slick slider，到目前为止它一直运行良好，但是我注意到了一些东西，我不知道这是一个错误还是我遗漏了什么。

加载光滑的 slider 时，就在您将整个 slider 显示在视口(viewport)中之前，它没有正确加载并且与页面 slider 的一半堆叠在彼此的底部。然后整个 slider 在视口(viewport)中可见，它跳回到它应该的位置，几乎就像它重新滑动了它自己一样。

下面是我的 Slick Slider 的代码

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

图像看起来像链接 here

我已经在各个地方阅读并找到了这个链接 Github link for same issue

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

请推荐

Answer 1

您是否尝试过延迟函数直到加载 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)