Owl carousel 2 即使在使用 responsiveclass true 后也无法在响应模式下工作

Posted 2023-05-07

【中文标题】Owl carousel 2 即使在使用 responsiveclass true 后也无法在响应模式下工作

【英文标题】：Owl carousel 2 not working in responsive mode even after using responsiveclass true

【发布时间】：2020-09-02 06:51:57

【问题描述】：

我将 owl carousel 插入到我的 html 页面。它在桌面上运行良好，但在调整大小时，看起来图像正在调整大小，但轮播并没有缩小。以下是点击下一个箭头且没有下一个项目时的问题截图。

下面是没有点击上一个或下一个箭头时页面加载的截图。

以下是我的脚本。谁能帮助我了解如何调整轮播窗口的大小以使其响应。

$('.owl-carousel').owlCarousel(
        //loop: true,
        items : 1,
        margin: 10,
        dots: false,
        nav: true,
        navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
        responsiveClass:true,
        responsive : 
            0:
                items:1,
                nav:true
            ,
            600:
                items:2,
                nav:false
            ,
            1000:
                items:3,
                nav:true,
                loop:false
            
        ,
    );

提前致谢！

【参考方案1】：

我在我的 HTML 中删除了父 div 上的“carousel-wrap”类，它起作用了。它之所以有效，是因为在 css 中，这个类有一个 1000px 的固定宽度