时间戳

首页 > 解决方案 > 图像之间的猫头鹰轮播过渡

jquery - 图像之间的猫头鹰轮播过渡

问题描述

我正在使用 owl carousel 来获取页面上的图像。在过渡期间，图像会跳跃，就像它们在屏幕上消失缩小高度一样。

所有的图片都是一样的大小，这个js在页面底部

.carousel-main').owlCarousel({items:1,loop:true,lazyLoad:true,transitionStyle:"fade",autoplay:true,autoplayTimeout:4000,

autoHeight:true,margin:1,animateOut:'fadeOut',nav:true,dots:false,navText: ['',''],})

<div class="row align-items-center my-1"><div class="col-12 col-carousel"><div class="owl-carousel carousel-main"><div><img class="owl-lazy" data-src="https://designedathome.com/carousel/1.jpg" alt="stuffed snowman"></div><div><img class="owl-lazy" data-src="https://designedathome.com/carousel/2.jpg" alt="reindeer and snowman pillow"></div><div><img class="owl-lazy" data-src="https://designedathome.com//carousel/3.jpg" alt="mini houses"></div><div><img class="owl-lazy" data-src="https://designedathome.com/carousel/4.jpg" alt="silver sheep picture"></div><div><img class="owl-lazy" data-src="https://designedathome.com//carousel/5.jpg" alt="By the Sea"></div><div><img class="owl-lazy" data-src="https://designedathome.com/carousel/6.jpg" alt="table w globe lights"></div><div><img class="owl-lazy" data-src="https://designedathome.com/carousel/7.jpg" alt="draperies"></div><div><img class="owl-lazy" data-src="carousel/8.jpg" alt="living room w lamp"></div></div></div></div></div>

指向它所在页面的链接

你还需要信息吗？

标签： jqueryhtmlowl-carousel

解决方案

我有解决这个问题的方法，但不要怪我。这不是最好的解决方案，但至少它有效。我不知道为什么会在你的情况下发生这种情况。其实这不应该发生。但问题出在.owl-stage-outer元素上，因为在每次幻灯片更改时，高度 ( style="height: xxx") 都会被删除并读取到该 div 中。因此，猫头鹰轮播会上下跳跃，因为height:xxx更改每个图像都会切换，直到加载所有图像。

我不确定，但您也可以通过更新的配置来解决此问题。调整authHeight或lazyLoad它们是我的第一个直觉，因为它只发生在所有图像旋转一次之前。如果没有任何帮助，请使用以下修复：

.owl-carousel .owl-stage-outer {
    height: 100% !important;
}

强迫这样的高度，尤其是这样的高度!important是不好的......但也许其他人有更好的解决方案或修复。但即使想到总比没有好。

推荐阅读