正在刷新 Owl 轮播 2

Question

我有 3 个 div 当我点击它们时激活滑动切换。在每个 div 里面有 owl 个旋转木马滑块。

如果我触发一个 div 滑块显示，但是当我单击另一个 div 滑块时不显示，除非我调整 window。

如何在每个 div 中触发滑块的滑动切换刷新？

我试过在滑动切换时使用这个，但它不起作用：

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

Answer 1

你用 class 触发。您可以尝试使用变量：

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

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

Answer 2

如果 .trigger('refresh.owl.carousel'); 不适合你，你可以使用

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

这将使轮播自动刷新。

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

正在刷新 Owl 轮播 2

Refreshing Owl Carousel 2

javascript

jquery

eventtrigger

owl-carousel-2