更新 owl 轮播项目数

Question

我已将 Owl 轮播添加到页面。我想在 ajax 调用后更新项目数。我试过了，但它对我不起作用。

jQuery('.owl-carousel').owlCarousel({
  items: 4,
  responsive: {
    0: {
      items: 1,
      nav: true
    },
    640: {
      items: 2,
      nav: true
    },
    1025: {
      items: 4,
      nav: true
    }
  }
});

jQuery('.owl-carousel').trigger('initialize.owl.carousel');
jQuery('.owl-carousel').trigger('refresh.owl.carousel');

Answer 1

我觉得OwlCarousel 没有检测和添加幻灯片的功能。您可以手动添加和删除它们，但不能自动添加和删除它们。

您可能想要销毁并重建：

...trigger('destroy.owl.carousel');
...owlCarousel({...});

您可以在重建之前检测到当前幻灯片并在重建时重新应用它，但它可能不匹配，具体取决于数据的更改方式。

Protip：省去一些打字，使用这个 shorthand with alias 作为你的 document.ready 包装器。然后您可以在脚本语句中使用 $ 而不是 jQuery。

jQuery(function($) {
    // your script, e.g. 
    // $('.owl-carousel').trigger();
});

更新 owl 轮播项目数

Update owl Carousel number of items

javascript

jquery

carousel

owl-carousel-2