CODEWITHSUNDEEP
javascriptjqueryeventtriggerowl-carousel-2
vedran
vedran

Reputation: 1118

Refreshing Owl Carousel 2

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

Upvotes: 15

Views: 72966

Answers (3)

Muayad Jamal
Muayad Jamal

Reputation: 159

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

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

which will make the carousel refresh automatically.

Upvotes: 15

Mahdi mehrabi
Mahdi mehrabi

Reputation: 1744

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

Upvotes: 2

egvrcn
egvrcn

Reputation: 984

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

Upvotes: 18

Related Questions