Question

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

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 Carousel数据选项

1 个答案: