jQuery owl carousel 使用变量定义选项答案

【问题标题】：jQuery owl carousel defining options using variablejQuery owl carousel 使用变量定义选项
【发布时间】：2021-08-23 19:36:14
【问题描述】：

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

页面代码

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

【问题讨论】：

标签： jquery owl-carousel

【解决方案1】：

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

试试这个：

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

【讨论】：