刷新 Owl Carousel 2

Question

我有三个div，当我点击它们时会激活滑动切换。每个div内部都有一个owl carousel轮播器。

如果我触发一个div，轮播器就会显示，但是当我点击其他div时，轮播器不会显示，除非我调整窗口大小。

如何在每个div中的轮播器上触发刷新的滑动切换？

我尝试了在滑动切换上使用这个，但它不起作用：

$('.owl-slider').trigger('refresh.owl.carousel');

- vedran

---

你能写更多的代码吗？ - egvrcn

Answer 1

您可以使用一个类来触发。您也可以尝试使用变量：

var $owl = $('.owl-carousel').owlCarousel({
    items: 1,
    loop:true
});

$owl.trigger('refresh.owl.carousel');

- egvrcn

---

对我来说，这实际上解决了一些与屏幕调整大小相关的其他问题。 - stealthysnacks

Answer 2

如果$owl.trigger('refresh.owl.carousel');对你不起作用，你可以使用

window.dispatchEvent(new Event('resize'));

这将使旋转木马自动刷新。

- Moaaid Jamal

---

太酷了！我在React项目中使用Owl，但初始化后我的轮播器显示出少量项目时遇到问题。 我尝试了 $(window).trigger('resize'); 但无效。 因此，我试着解决这个问题并通过添加 onInitialized={window.dispatchEvent(new Event('resize'));} 来解决它。 - Стас Пишевский

不理解这些天才在说什么。你应该提供任何片段、演示代码等。 - Shurvir Mori

Answer 3

我想为我的轮播设置新的HTML内容，但是上面的答案对我没有起作用， 所以我用另一种方法解决了我的问题

首先，定义一个函数来启动owlCarousel并运行该函数

let myCarousel; //a variable thats hold owlCarousel object
function myCarouselStart() {
    myCarousel = $('#my-carousel.owl-carousel').owlCarousel(setting);
}

$(document).ready(() => {
    myCarouselStart(); // run owl carousel for first time
});

然后当您想要刷新轮播时，请使用以下代码

 myCarousel.trigger("destroy.owl.carousel");
 $("#my-carousel").html(newHtmlContent);
 myCarouselStart();

- Mahdi mehrabi