jQuery owl 轮播使用变量定义选项

Question

目前正在循环浏览页面上的几个轮播，但我正在尝试根据属性中的值为每个轮播提供不同的选项。它加载正常，但不会应用选项。

页面代码

<div class="owl-carousel owl-theme" data-plugin-options='{"dots": true, "autoplay": false, "autoplayTimeout": 3000, "loop": false, "margin": 10, "nav": true, "responsive": {"0": {"items":2 }, "600": {"items": 4 }, "1024": {"items": 6 }, "1400": {"items": 6 }, "1920": {"items": 10}}}'>
....
</div>

jQuery

$('.owl-carousel').each( function () {
        
        var $owl = $(this);
        $owl.trigger('destroy.owl.carousel');
        
        $owl.html($owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
        
        var options = $(this).attr('data-plugin-options').substring(1, $(this).attr('data-plugin-options').length - 1).trim();
        
        $owl.owlCarousel({ 
            options
        });
        
    });

Answer 1

您需要先将 options 从字符串转换为 JSON 对象，然后再将其传递给 Owl

试试这个：

$owl.owlCarousel(
   JSON.parse(options)
);

jQuery owl 轮播使用变量定义选项

jQuery owl carousel defining options using variable

jquery

owl-carousel