多响应猫头鹰轮播 [英] multiple responsive owl carousel

问题描述

我需要在某些页面中创建多个响应式猫头鹰轮播，我需要使用数据属性.我是这样工作的，但我无法响应我的轮播，

i need to create multiple responsive owl carousel in some page, i need to works with Data Attributes. I work like this but i cant do responsive my carousel,

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>

现在我需要响应我的猫头鹰轮播了，我确实喜欢这样...

now i need to responsive my owl carousel , and i do like this ...

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>

但响应式选项无效.我在猫头鹰传送带文档中看到了这个，

but responsive option, dose't works. i see in owl carousel documentation and there is this :

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

我需要在页面中创建一些动态且响应迅速的轮播，并且应该使用数据属性...

i need to create some dynamic and responsive carousel in my page and i should be use Data Attributes ...

推荐答案

您正在将responsive参数作为字符串传递给标记，并且最后缺少一个右括号:

You are passing the responsive argument as a string in your markup, and you have a missing closing bracket in the end:

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

删除引号，以便将其解析为对象而不是文字字符串:

Remove the quotes so that it is parsed as an object instead of a literal string:

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

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

In other words, your markup should look like this:

<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>

这篇关于多响应猫头鹰轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！