jQuery owl carousel使用变量定义选项

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传递给Owl之前将其从字符串转换为JSON对象

试试这个:

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