清爽猫头鹰旋转木马2

Refreshing Owl Carousel 2

本文关键字：旋转木马 猫头鹰      更新时间：2023-09-26

我有3个div，当我点击它们时激活滑动切换。每个div里面都有一个owl carousel slider

如果我触发一个div滑块显示，但当我点击其他div滑块不显示，除非我调整窗口的大小。

如何在每个div中的滑动条上触发刷新?

我尝试了这个幻灯片切换，但它不起作用:

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

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

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

如果.trigger('refresh.owl.carousel');不能与您一起工作，您可以使用

窗口。dispatchEvent(新事件("调整")),

我想为我的carousel设置新的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();
相关文章：