在 Owl 轮播 2 中加载动态内容

Question

我有一个包含 2 个轮播的网页，其中我必须根据用户操作显示不同的项目。

新数据来自网络，我用fetch，把json解析成数组，很好。

唯一的问题是我无法让新项目替换轮播中的旧项目。

举一个我试过的简单例子

var carousel = $jq("#owl-genres");
for(...) {
   carousel.owlCarousel()
       .trigger('add.owl.carousel', [$jq('<div class="item">' + genres[i] + '</div>')])
       .trigger('refresh.owl.carousel');
}

但是没有任何反应。尽管执行了方法并执行了 .trigger，但旧元素仍然存在。

我也试过了

for(...) {
   content += '<div class=\'item\'>' + genres[i] + '</div>'
   carousel.html(content)
}
carousel.owlCarousel().trigger('refresh.owl.carousel');

这确实将新项目添加到旋转木马中，但它们现在垂直堆叠，导航不起作用，我猜整个旋转木马都坏了。

那么替换 Owl 轮播 2 中的项目的正确方法是什么？

Answer 1

解决方案基于

这一切都可以放在一个函数中，该函数接收要显示的新元素数组，并在我们获取新数据后立即执行。希望对其他人有帮助（我看到有很多关于这个的问题...）

//these 3 lines kill the owl, and returns the markup to the initial state
carousel.trigger('destroy.owl.carousel'); 
carousel.find('.owl-stage-outer').children().unwrap();
carousel.removeClass("owl-center owl-loaded owl-text-select-on");

// add the new items 
for (var i = 0; i < genres.length; i++) { 
     content += "<div class=\"item\">" + genres[i] + "</div>"
}
carousel.html(content);

//reinitialize the carousel (call here your method in which you've set specific carousel properties)
carousel.owlCarousel();

Answer 2

我发现问题是向 trigger('add.owl.carousel', array) 提供了一个数组，当我加入数组时一切正常，例如trigger('add.owl.carousel', array.join('')).

在 Owl 轮播 2 中加载动态内容

Load dynamic content in Owl Carousel 2

javascript

jquery

dynamic-content

owl-carousel-2