猫头鹰轮播动态参数

Question

是否有一些解决方法可以动态设置 owl carousel 的参数？此代码不起作用（jquery 错误）。

$('.carousel').owlCarousel({
  loop: true,
  autoplay: false,
  items: 2,
  slideBy: 2,
  dots: false,
  nav: true,
  navContainer: function(elem) {
    return '#' + $(elem).find('.some-class').prop('id');
  }
});

这不会因错误而结束，但未设置 navContainer。

$('.carousel').owlCarousel({
  loop: true,
  autoplay: false,
  items: 2,
  slideBy: 2,
  dots: false,
  nav: true,
  navContainer: '#' + $(this).find('.some-class').prop('id')
});

我需要这样做。示例已简化，我想要一个代码，用于从 html 设置更多轮播和参数。

Answer 1

您的代码存在问题，因为 this 引用未指向父轮播。要解决此问题，您可以使用 each() 循环遍历它们：

$('.carousel').each(function() {
  $(this).owlCarousel({
    loop: true,
    autoplay: false,
    items: 2,
    slideBy: 2,
    dots: false,
    nav: true,
    navContainer: '#' + $(this).find('.some-class').prop('id')
  });
});