令人耳目一新的猫头鹰旋转木马 2答案

【问题标题】：Refreshing Owl Carousel 2令人耳目一新的猫头鹰旋转木马 2
【发布时间】：2015-09-02 08:14:23
【问题描述】：

我有 3 个 div，当我单击它们时会激活滑动切换。并且在每个 div 里面都有 owl carousel 滑块。

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

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

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

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

【问题讨论】：

你能写更多代码吗？

标签： javascript jquery eventtrigger owl-carousel-2

【解决方案1】：

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

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

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

【讨论】：

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

【解决方案2】：

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

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

这将使轮播自动刷新。

【讨论】：

酷！我在 React 项目中使用 Owl，所以在使用 items={}` 初始化我的轮播后，我遇到了问题，显示的项目很少。我试过$(window).trigger('resize');，但没用。所以我已经解决了这个问题并通过添加onInitialized={window.dispatchEvent(new Event('resize'));} 解决了它

【解决方案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();

【讨论】：