Owl 轮播页面加载时可见的所有项目

Owl carousel all items visible when page is loading

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

如果页面加载并呈现第一个元素,所有旋转木马 "slides" 像列表一样相互重叠,然后页面加载,奇迹发生,每张额外的幻灯片消失,旋转木马诞生。

这是默认的 Owl 行为吗?我应该如何解决这个问题?太丑了,太不专业了

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

问题出在class:

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

解决方案是删除 class“owl-loaded”。 Owl js 自己添加它以在块中渲染滑块,没有它,滑块应该具有样式 "display:none"。非 js 浏览器除外。

第二件事是 owl 的样式:类 在 owl.carousel.css 中。只需在 OWL 轮播页面上关注 "install guide"。

如果有 none css 并且 "loading glitch" 是唯一不需要的效果,请添加:

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