Освежающая карусель совы 2

У меня есть 3 div, которые активируют переключатель слайдов, когда я нажимаю на них. И внутри каждого div есть слайдер карусели совы.

Если я запускаю один div, ползунок отображается, но когда я нажимаю другой слайдер div, он не отображается, пока я не изменю размер окна.

Как я могу вызвать обновление при переключении слайдов для ползунка в каждом div?

Я пробовал использовать это при переключении слайдов, но это не сработало:

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

javascript jquery eventtrigger owl-carousel-2
person vedran    schedule 02.09.2015    source источник
comment
Можете ли вы написать больше кода?   -  person egvrcn    schedule 02.09.2015

Ответы (3)


arrow_upward
16
arrow_downward

Вы запускаете с классом. Вы можете попробовать с переменной:

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

$owl.trigger('refresh.owl.carousel');
person egvrcn    schedule 02.09.2015
comment
Для меня это фактически исправило некоторые другие проблемы, связанные с изменением размера экрана. - person stealthysnacks; 18.01.2018

arrow_upward
9
arrow_downward

если .trigger('refresh.owl.carousel'); у вас не сработало, вы можете использовать

window.dispatchEvent(новое событие('изменить размер'));

что автоматически обновит карусель.

person Moaaid Jamal    schedule 15.03.2020
comment
Прохладно! Я использую проект Owl in React, поэтому у меня возникла проблема, когда после инициализации моя карусель с items={}` отображалась с несколькими элементами. Я пробовал $(window).trigger('resize');, но это не сработало. Итак, я поиграл с этой проблемой и решил ее, добавив onInitialized={window.dispatchEvent(new Event('resize'));} - person Стас Пишевский; 25.04.2020

arrow_upward
2
arrow_downward

Я хочу установить новый 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();
person Mahdi mehrabi    schedule 11.07.2020