Question

我需要在某个页面中创建多个响应式猫头鹰轮播，我需要使用数据属性。我这样工作，但我不能回应我的旋转木马，

的jQuery

var $carousel = $('.data-carousel[data-carousel]');
if ($carousel.length) {
    $carousel.each(function() {
        $(this).owlCarousel($(this).data('carousel'));
    });
}

HTML

<div class="owl-carousel data-carousel" data-carousel='{"margin": 10, "items": 4, "center": "true", "loop": true}'>

    <div class="item"><h1>1</h1></div>
    <div class="item"><h1>2</h1></div>
    <div class="item"><h1>3</h1></div>
    <div class="item"><h1>4</h1></div>

</div>

现在我需要回应我的猫头鹰旋转木马，我喜欢这个......

HTML

<div class="owl-carousel data-carousel" data-carousel='{"margin": 10, "items": 4, "center": "true", "loop": true, "responsive": "{0:{items:1},768:{items:2},992:{items:3}"}'>

    <div class="item"><h1>1</h1></div>
    <div class="item"><h1>2</h1></div>
    <div class="item"><h1>3</h1></div>
    <div class="item"><h1>4</h1></div>

</div>

但响应性选项，不起作用。我在owl carousel文档中看到了这个：

的jQuery

$('.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
        }
    }
});

我需要在我的页面中创建一些动态且反应灵敏的轮播，我应该使用数据属性......

Answer 1

您在标记中将responsive参数作为字符串传递，并且最后有一个缺少的结束括号：

"responsive": "{0:{items:1},768:{items:2},992:{items:3}"
//             ^ This bracket is not closed!

删除引号，使其被解析为对象而不是文字字符串：

"responsive": {0:{"items":1},768:{"items":2},992:{"items":3}}

换句话说，您的标记应如下所示：

<div class="owl-carousel data-carousel" data-carousel='{"margin": 10, "items": 4, "center": "true", "loop": true, "responsive": {0:{"items":1},768:{"items":2},992:{"items":3}}}'>

    <div class="item"><h1>1</h1></div>
    <div class="item"><h1>2</h1></div>
    <div class="item"><h1>3</h1></div>
    <div class="item"><h1>4</h1></div>

</div>

Answer 2

如果您使用的是v1.3.3，请尝试以下操作...

$(".myClass").owlCarousel({
    autoPlay: false,
    navigation: true,
    items: 4,
    itemsCustom: [
        [0, 1],
        [320, 1],
        [480, 2],
        [600, 2],
        [768, 2],
        [992, 3],
        [1200, 4]
    ]
});

这就是我在解决方案中管理自适应大小的方式。

Answer 3

2020年10月更新

响应式：JSON数据提到以特定分辨率显示多少个项目 {0：{item：1}}，它仅显示低于屏幕分辨率的一项滑块

基于屏幕分辨率显示not id滑块项。


$('.brand-img').owlCarousel({
    loop: false,
    margin: 10,
    nav: true,
    dots: true,
    mouseDrag: true,
    autoplay:true,
    items:1,
    responsive: {
        0: {
            items: 1,
            nav: true,
            mouseDrag: true,
            autoplay: true,
            dots: true,
        },

        576: {
            items: 3,
            nav:true,
            dots: true,
            mouseDrag: true,
            autoplay: true,
        },
        
        767: {
            items: 3,
            nav: true,
            mouseDrag: true,
            autoplay: true,
        },
        992: {
            items: 4,
            nav: true,
            loop: false,
            margin: 20,
        },
    }
});

Answer 4

请删除"items": 4,，因为您已经提到responsive:中的项目

<div class="owl-carousel data-carousel" data-carousel='{"margin": 10, "center": "true", "loop": true, "responsive": "{0:{items:1},768:{items:2},992:{items:3}"}'>

Answer 5

您需要添加以下 HTML 结构，并且可以根据您的要求更改数据属性的值。您还可以通过将其他 data-* 属性添加到 Js 文件中以相同的方式添加其他 data-* 属性来访问 owl carousel 的其他功能。

<div class="owl-carousel" data-mobileview="1" data-tabletview="2" data-laptopview="3" data-mainview="3" data-autopaly="true" data-spacebetween="30" data-speed="8000" data-navigation="false" data-navdots="false">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

js 文件

    $('.owl-carousel').each(function() {
        var mobile_view = $(this).data('mobileview');
        var tablet_view = $(this).data('tabletview');
        var laptop_view = $(this).data('laptopview');
        var main_view = $(this).data('mainview');
        var auto_play = $(this).data('autopaly');
        var space_between = $(this).data('spacebetween');
        var speed = $(this).data('speed');
        var navigation = $(this).data('navigation');
        var navdots = $(this).data('navdots');
        $(this).owlCarousel({
            loop: true,
            autoplay: auto_play,
            autoplayTimeout: speed,
            margin: space_between,
            nav: navigation,
            dots: navdots,
            responsive: {
                0: {
                    items: mobile_view
                },
                768: {
                    items: tablet_view
                },
                1190: {
                    items: laptop_view
                },
                1380: {
                    items: main_view
                }
            }
        });

多响应猫头鹰旋转木马

5 个答案: