Refreshing Owl Carousel 2

Question

I have 3 divs that activate slide toggle when I click on them. And inside every div there is owl carousel slider.

If I trigger one div the slider shows, but when I click other div slider doesn't show unless I resize the window.

How can I trigger refresh on slide toggle for the slider in every div?

I tried with this on slide toggle but it doesn't work:

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

Answer 1

You trigger with a class. You can try with a variable:

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

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

Answer 2

if .trigger('refresh.owl.carousel'); didn't work with you, you can use

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

which will make the carousel refresh automatically.