OWL Carousel图像最初尺寸不合适

我正在使用OWL Carousel并且我已对其进行编码,因此将显示一个图像,然后每隔15秒将下一个图像滑入。我已将宽度设置为屏幕的100%,因此在理论上对js进行了适当编码应该有一个图像一次全尺寸….但是会发生什么是它显示所有的图像相当小,然后如果我调整屏幕甚至1像素,它捕捉它应该如何…..

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

这是我的HTML

 

这是我的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-carousel div可能位于加载DOM时不可见的容器内。

我在引导模式中使用owl轮播遇到了类似的问题,并且通过在引导模式的shown事件中启动owlCarousel来修复它。

如果您需要更多详细信息,请告知我们,或者您已修复此问题。