Question

如何使用数据属性响应owl轮播？

这样的事情......

<div class="owl-carousel data-carousel" data-carousel='{"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 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>

和

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

在猫头鹰旋转木马文件中我们喜欢这个...

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

但是按照我的方式，我想要一种新的方式来响应具有数据属性的猫头鹰轮播。我看到这样的一些片段......

<div class="owl-carousel" data-carousel='{"breakpoint":"0:1,992:2"}'></div>

具有数据属性的响应式猫头鹰轮播

0 个答案: