Question

我正在尝试在我的网站中实现owl滑块，它运行良好，但唯一的问题是猫头鹰滑块默认情况下在一张幻灯片上显示5个项目，所以我需要让每个幻灯片显示3个项目而不是5个

我也尝试在官方网站上添加以下代码，但它不适用于我，请告诉我如何修复。

jQuery(document).ready(function(){
jQuery('.owl-demo').owlCarousel({
margin: 0,
responsiveClass: true,
smartSpeed: 500,
dots: ($(".owl-carousel .item").length > 1) ? true: false,
loop:($(".owl-carousel .item").length > 1) ? true: false,
responsive: {
    0: {
        items: 1,
    },
    1140: {
        items: 3,
    },
    1110: {
        items: 3,
    }
  } 
})

由于

Answer 1

我有类似的问题，我的问题如下：

我导入动态css样式文件;
当文档准备就绪时，动态文件尚未加载，但猫头鹰已被加入;
然后加载了动态文件，现在动态文件的某些样式调整了大小的owl-carousel容器，但现在没有触发owl的响应;

当所有风格都准备就绪时，您可以初始化猫头鹰。

window.addEventListener("load", function () {
    jQuery('.owl-demo').owlCarousel({
        margin: 0,
        responsiveClass: true,
        smartSpeed: 500,
        dots: ($(".owl-carousel .item").length > 1) ? true : false,
        loop: ($(".owl-carousel .item").length > 1) ? true : false,
        responsive: {
            0: {
                items: 1,
            },
            1140: {
                items: 3,
            },
            1110: {
                items: 3,
            }
        }
    }, false);

另一种解决方法如下：

setTimeout(function () {
    $('.owl-carousel').trigger('refresh.owl.carousel');
}, 500);

如何仅在Owl Slider上查看3个项目而不是5个

1 个答案: