首次加载时猫头鹰轮播宽度问题

Posted 2023-05-07

【中文标题】首次加载时猫头鹰轮播宽度问题

【英文标题】：Owl Carousel width issues when first load

【发布时间】：2015-12-04 09:10:51

【问题描述】：

我正在使用猫头鹰旋转木马。这是我的脚本：

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

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

但是当我调整浏览器的大小时，虽然只是一点点，图像的大小会变成我想要的实际大小和设置

所以，问题是我第一次加载浏览器时的图像预览。 为什么会这样？我认为关于我的浏览器大小的问题

【问题讨论】：

我之前也遇到过同样的问题，是因为我更改了项目中的 CSS，尤其是位置和显示。尝试更改为默认值。

我没有改变任何东西。我从这个链接得到owlgraphic.com/owlcarousel/demos/itemsCustom.html

[已修复] 我在 div 中未激活的项目（我使用标签面板）。 ***.com/questions/27006239/…

【参考方案1】：

当我在工作状态下测量owl-stage容器的宽度时，我解决了这个问题。然后设置样式中的值，例如：

#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
            
        
      );
    );