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

score 16 · Accepted Answer · edited Sep 29 '16 at 12:04

16

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

edited Sep 29 '16 at 12:04

Gleb Kemarsky

8,401
6
37
57

answered Sep 02 '15 at 08:35

egvrcn

904
9
24

1

For me this actually fixed some other issues related to screen resizing. – stealthysnacks Jan 18 '18 at 02:27

score 9 · Answer 2 · answered Mar 15 '20 at 14:51

9

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.

answered Mar 15 '20 at 14:51

Moaaid Jamal

101
1
5

Cool! I use Owl in React project so I had problem when after initialization my carousel with `items={`}` display with few items. I tried `$(window).trigger('resize');` but it's not worked. So I had played with this problem and soled it by added `onInitialized={window.dispatchEvent(new Event('resize'));}` – Стас Пишевский Apr 25 '20 at 19:56

Mahdi mehrabi · Answer 3 · 2020-08-13T08:45:07.110

I want to set new html content for my carousel and the above answers did not worked for me
so I solved my problem with another way

first, define a function to start owlCarousel and run that function

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

then when you want to refresh the carousel use the below code

 myCarousel.trigger("destroy.owl.carousel");
 $("#my-carousel").html(newHtmlContent);
 myCarouselStart();

Refreshing Owl Carousel 2

3 Answers3

Linked