首次加载时猫头鹰轮播宽度问题 [英] Owl Carousel width issues when first load

问题描述

我正在使用猫头鹰传送带.这是我的脚本:

i'm using owl carousel. this is my script:

$("#owl-demo").owlCarousel({ 
  items : 3
});

我希望容器显示3张图像.但是，这是第一次加载时的图片

i want the container show 3 images. But, here is the picture when first load

但是当我调整浏览器的大小时，尽管只有一点点，但是图像的大小会更改为我想要的实际大小和设置

but when i resize the browser, although just a little bit, size of images change to actual size and setting that i want

因此，问题是我第一次加载浏览器时的图像预览. 为什么会这样呢?我认为有关我的浏览器大小的问题

So, the problem is images preview when i load browser for the first time. Why this is happening? i think the issues about size of my browser

推荐答案

当我在工作状态下测量猫头鹰阶容器的宽度时，我解决了这个问题.然后按照以下样式设置值:

I fixed this problem when I measured the width of the owl-stage container in a working state. And then set the values in the styles like:

#photo-gallery .owl-stage {
  min-width: 10317px;
}

我的JS:

$(document).ready(function(){
      $('.owl-carousel').owlCarousel({
        center: true,
        loop:true,
        margin:20,
        autoWidth: true,
        responsive:{
            0:{
                items: 1,
                autoWidth: false
            },
            908:{
                items: 1,
                autoWidth: true
            },
            1236:{
                items: 3
            }
        }
      });
    });

这篇关于首次加载时猫头鹰轮播宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！