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

【问题标题】：responsive owl carousel with data attributes具有数据属性的响应式猫头鹰轮播
【发布时间】：2022-02-14 03:20:26
【问题描述】：

如何用数据属性响应猫头鹰轮播？

类似的东西...

<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 文档中，我们有这样的 ...

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

但以我的方式，我想要一种新的方式来响应具有数据属性的猫头鹰轮播。我看到一些像这样的sn-ps ...

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

【问题讨论】：

有什么解决办法吗？

标签： javascript jquery html responsive owl-carousel-2

【解决方案1】：

我们可以这样做

<div class="your-custom-class">
    <ul class="tab-list owl-carousel nav-style5" data-nav="true" data-autoplay="true" data-dots="false" data-loop="true" 
    data-margin="30" data-responsive='{"0":{"items":1},"600":{"items":2},"1000":{"items":6}}'>
        <li class="custom-class2">
            <div class="custom-class3">
                <div class="custom-class4">
                    <a href="#"><img src="/src/images/img1.png" alt=""></a>
                    <div class="gorup-button"> 
                        <a href="#" class="wishlist">
                            <i class="fa fa-heart"></i>
                        </a> 
                    </div>
                </div>
                <div class="product-info">
                    <h3 class="product-name">
                        <a href="#">Product Name</a>
                    </h3> 
                    <span class="price">
                       <ins>₹300</ins>
                       <del>₹400</del>
                    </span> 
                    <a href="#" class="button">ADD TO WISHLIST</a> 
                </div>
            </div>
        </li>
    </ul>
</div>

【讨论】：