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');

确实将新物品添加到旋转木马但它们现在垂直堆叠，导航无法正常工作，我猜整个旋转木马都坏了。

那么更换猫头鹰旋转木马2中物品的正确方法是什么？

Answer 1

基于https://stackoverflow.com/a/37862372/4249825

的解决方案

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

//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();

在Owl Carousel 2中加载动态内容

1 个答案: