Owl 页面上多个滑块的轮播数据选项

Question

我在这里找到了这段代码：但不幸的是，如果页面包含多个滑块，它就无法正常工作。

var oc = $('.owl-carousel');
  var ocOptions = oc.data('carousel-options');
  var defaults = {
    loop:            true,
    nav:             false,
    autoplay:        true,
  }
  oc.owlCarousel( $.extend( defaults, ocOptions) );

html:

<div class="owl-carousel" data-carousel-options='{"autoplay":"true","autoplayTimeout":"6000","items":"2"}'> ... </div>

如何让它在多个滑块上工作？

提前致谢。

Answer 1

初始化每个轮播：

var oc = $('.owl-carousel');
oc.each(function () {
    var el = $(this);
    el.owlCarousel($.extend({
        autoplay: 2000,
        loop: true,
        items: 4,
        autowidth: true,
        nav: false,
        dots: false,
        margin: 30
    }, el.data('carousel-options')));
});

Owl 页面上多个滑块的轮播数据选项

Owl Carousel data options for multiple sliders on page

owl-carousel-2