Question

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

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

这是我的HTML

<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')
})

Answer 1

原因可能是以下之一：

要么在加载DOM之前调用owl.owlCarousel方法。因此，请尝试在文档准备中启动它。
或者.owl-carousel div可能位于加载DOM时不可见的容器内。

我在bootstrap模式中使用owl carousel遇到了类似的问题，并且通过在bootstrap模式的shown事件中启动owlCarousel来修复它。

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

OWL Carousel图像最初尺寸不合适

1 个答案: