猫头鹰旋转木马图像之间的过渡

Question

我正在使用猫头鹰旋转木马在页面上显示图像。在过渡过程中，图像会跳跃，就像它们在屏幕上的缩小高度一样。

所有图像都是相同的大小，这个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>

a link to the page it's on

你还需要信息吗？

Answer 1

我解决了这个问题，但不要怪我。它不是最好的解决方案，但至少它是有效的。我不知道为什么会发生这种情况。实际上这不应该发生。但问题是位于.owl-stage-outer元素，因为在每次幻灯片更改时，高度（style="height: xxx"）被移除并读回此div。因此，猫头鹰旋转木马上下跳跃，因为height:xxx改变了每个图像开关，直到所有图像都被加载。

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

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

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