javascript - 令人耳目一新的猫头鹰旋转木马 2

Question

当我点击它们时，我有 3 个 div 会激活滑动切换。每个 div 里面都有猫头鹰旋转木马滑块。

如果我触发一个 div 滑块会显示，但是当我单击其他 div 滑块时，除非我调整窗口大小，否则不会显示。

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

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

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

Answer 1

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

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