猫头鹰轮播加载页面时所有可见的项目

Question

例如，当用户使用速度稍慢的Internet或移动设备时，就会出现此问题。但是当轮播中的页面内容/图像尚未缓存时，有时也会以较高的速度看到闪烁。

如果呈现页面加载和第一个元素，则所有轮播“幻灯片”都像列表一样位于彼此下方，然后加载页面，发生魔术，每一个额外的幻灯片消失，轮播就诞生了。

这是猫头鹰的默认行为吗？我该如何解决？这看起来很丑陋而且不专业。

Answer 1

这是老问题了，但我最近也遇到了同样的问题。

问题出在课堂上：

<div id="yourowlcarouselid" class="owl-carousel owl-theme owl-loaded">

解决方案是删除“ owl-loaded ”类。Owl js 自己添加它来渲染块中的​​滑块，没有这个，滑块应该具有“display：none”样式。除了 no-js 浏览器。

第二件事是 owl 的样式：类位于 owl.carousel.css 中。只需按照 OWL Carousel 页面上的“安装指南”进行操作即可。

如果没有 css 并且“加载故障”是唯一不需要的效果，请添加：

.owl-carousel {
    display: none;
}
.no-js .owl-carousel {
    display: block;
}
.owl-carousel.owl-loaded {
    display: block;
}