加载时堆叠图像 - 光滑

We are using slick slider for a clients project and it has been working perfectly so far, however I have noticed something, I don't know whether it is a bug or something that I am missing something.

我们正在为客户端项目使用光滑的滑块,它到目前为止一直运行良好,但我注意到了一些东西,我不知道它是一个bug还是我遗漏的东西。

When the slick slider is loaded, just before you get the whole slider visible in the viewport it doesnt load properly and stacks at bottom of each other with half of the slider of the page. Then whole slider is visible in the viewport it jumps back to how it should, almost like it has re-slicked its self.

加载光滑滑块时,就在您在视口中看到整个滑块之前,它没有正确加载并且在页面滑块的一半处堆叠在彼此的底部。然后整个滑块在视口中可见,它会跳回到它应该如何,几乎就像它重新滑动了它自己一样。

Below is the code for my Slick Slider

下面是我的Slick Slider的代码

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

and Images looks like as in link here

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

I have read on various places and found this linkGithub link for same issue

我已阅读过各种地方,并发现此链接同一问题的链接

But it is not working for me. I am still getting same ugly effect.

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

Please suggest

1 个解决方案

#1

Have you tried delaying the function until the dom is loaded?

您是否尝试过延迟功能直到加载dom?

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

or, if that doesn't work:

或者,如果这不起作用:

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

#1