carousel 2 re render при изменении разрешения

Question

Я работаю над отзывчивой галереей. Мне нужно изменить количество отображаемых изображений в зависимости от разрешения. Например, когда размер меньше 728 пикселей, мне нужно отображать только одно изображение, но когда оно больше трех. Я использую скрипт сова-карусель 2, поэтому ниже приведен пример инициализации для specyfic div. Как вы можете видеть, я устанавливаю параметр «items» на 3 и кажется хорошим, но когда экран меньше, мне нужно установить его на 1
, так что мой вопрос - Как изменить параметры в карусели динамически, когда уже отображается?

$ ("моя-галерея".) OwlCarousel ({ пункты: 3, });.

> this picture shows what i want <

Answer 1

Согласно documentation, вы должны использовать replace.owl.carousel для переинициализации существующей карусели.

Что я делаю ниже:

1. На window.load событие создать пользовательский объект в окне (myOO = myOwlObject), где я сохранить, если я на большом экране или нет. Я также использую его, чтобы сохранить некоторые параметры во всем скрипте, чтобы вы могли легко их изменить.
2. Основываясь на широком/узком состоянии, я инициализирую carousel с 1 или 3 элементами.
3. На мероприятии window.resize Я проверяю, находится ли я в том же интервале (широкий/узкий) как сохраненный в isWide. Когда я нахожусь в другом интервале, я заменяю карусель и сохраняю новый интервал в isWide.

$(window).on('load', function(){ 
    window.myOO = { 
    breakpoint: 600 
    isWide: $(window).width() > this.breakpoint, 
    options: this.isWide ? {items:3} : {items:1} 
    }; 
    $(".my-gallery").owlCarousel(window.myOO.options); 
}) 
$(window).on('resize', function(){ 
    var shouldReinit = ($(window).width() > window.myOO.breakpoint) !== window.myOO.isWide; 
    if (shouldReinit) { 
    if ($(window).width() > window.myOO.breakpoint) { 
     $(".my-gallery").trigger('replace.owl.carousel', [{items: 3}]); 
    } else { 
     $(".my-gallery").trigger('replace.owl.carousel', [{items: 1}]); 
    } 
    window.myOO.isWide = $(window).width() > window.myOO.breakpoint; 
    } 
})