owl-carousel - Owl Carousel 页面加载时可见的所有项目

Question

例如，此问题主要发生在用户使用速度较慢的互联网或移动设备时。但是，当轮播中的页面内容/图像没有被缓存时，有时也会在更高的速度上看到闪烁。

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

这是猫头鹰的默认行为吗？我应该如何解决这个问题？这是非常难看和不专业的。

Answer 1

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

问题在类里面:

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

解决方案是删除类“ owl-loaded ”。 Owl js 自己添加它以在 block 中渲染 slider ，没有这个， slider 应该有样式“显示:无”。除了无 js 浏览器。

第二件事是 owl 的风格:类在 owl.carousel.css 中。只需按照 OWL Carousel 页面上的“安装指南”进行操作即可。

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

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