OWL 轮播图片一开始尺寸不合适

OWL Carousel image not right size at first

本文关键字：不合适 一开始 OWL      更新时间：2023-09-26

我正在使用OWL轮播，我已经对其进行了编码，因此将显示一张图像，然后每15秒就会滑入下一张图像。我已将宽度设置为屏幕的 100%，并适当地对 js 进行了编码，因此理论上一次应该有一个全尺寸的图像......然而，发生的事情是它显示的所有图像都相当小，然后如果我调整屏幕大小，即使是 1 个像素，它也会捕捉到它应该的样子......

关于如何避免必须调整屏幕大小以使图像为全尺寸的任何想法？

这是我的网页

<div class="owl-carousel">
    <img src="assets/background1.jpg" />
    <img src="assets/background2.jpg" />
    <img src="assets/background3.jpg" />
</div>

这是我的 js

var owl = $('.owl-carousel');
owl.owlCarousel({
    singleItem: true,
    items:1,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:15000,
    autoplayHoverPause:true

});
$('.play').on('click',function(){
    owl.trigger('autoplay.play.owl',[1000])
})
$('.stop').on('click',function(){
owl.trigger('autoplay.stop.owl')
})

原因可能是以下之一：

  1. 要么在加载 DOM 之前调用 owl.owlCarousel 方法。因此，请尝试在文档就绪中启动它。
  2. 或者您的 .owl-carouseldiv 可能位于加载 DOM 时不可见的容器内。
我在引导模式中使用猫头鹰轮播

时遇到了类似的问题，通过在引导模式的shown事件中启动猫头鹰轮播来修复。

如果您需要有关此内容的更多详细信息或已修复，请告诉我。

相关文章：