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强行是不好的……但是也许其他人有更好的解决方案或解决方案。但甚至想到总比没有好。

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

1 个答案: