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

回答1:

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>

回答2:

If you are using v1.3.3 please try the following...

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

This is how I manage responsive sizing within my solution.