多响应猫头鹰轮播答案

【问题标题】：multiple responsive owl carousel多响应猫头鹰轮播
【发布时间】：2023-07-31 16:08:01
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery responsive custom-data-attribute owl-carousel-2

【解决方案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>

【讨论】：

我这样做了，但选项不起作用，当我使用
其他选项有效且响应式剂量有效，但是当我喜欢您的方式时“响应式”：{0:{"items":1 },768:{"items":2},992:{"items":3} ，dosnet 的所有选项都有效
@ShahePars 更新了我的答案。好像你最后忘记了}。
用你的新答案，所有选项都不起作用，它的平均值，响应性剂量起作用，边际不起作用和......没有选项剂量起作用。我尝试了很多方法，但我不知道如何用数据属性响应我的轮播...@Terry

【解决方案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]
    ]
});

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

【讨论】：

【解决方案3】：

2020 年 10 月更新

响应式：JSON 数据提及有多少项目以特定分辨率显示 {0:{item:1}} 它只显示低于屏幕分辨率的 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,
        },
    }
});

【讨论】：

【解决方案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}"}'>

【讨论】：

【解决方案5】：

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

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

【讨论】：