Question

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    items : 3,
    lazyLoad : true,
    autoPlay : true,
    navigation : true,
    navigationText :  false,
    pagination : false,
  });
});

这是我的脚本。我也想在mobileview中显示三个或更多项目。我参考了一些答案并将其放置在脚本中，但它不会接受，宽度将取自js文件。

Answer 1

用于添加CSS文件的响应结构的设置

responsive : {
    // breakpoint from 0 up
    0 : {
        option1 : value,
        option2 : value,
        ...
    },
    // breakpoint from 480 up
    480 : {
        option1 : value,
        option2 : value,
        ...
    },
    // breakpoint from 768 up
    768 : {
        option1 : value,
        option2 : value,
        ...
    }
}

添加猫头鹰轮播脚本，添加您的js文件

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})

这里是文档链接：https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

如何在owl.carousel.js中响应性地设置宽度？

1 个答案: