Owl Carousel 2 - не изменяется размер owl-stage

230

26 мая 2019, 04:40

Такая проблема:
Я подключил Owl-Carousel успешно на сайт. Он у меня установлен во весь экран компьютера (w:100%; h:100%), но когда я открываю боковое меню и меняю ширину owl, то размер .owl-stage и .owl-item остается неизменным, потому что там фиксированная ширина (в пикселях).

Заметил, что ширина фиксированная меняется при открытии инспектора кода или при изменении ширины экрана браузера -> т.е. идет перерасчет ширины.

autowidth:true не помогает(

Надо какой-то рефрешер в js, но который не перезагружал страницу целиком, а просто заставлял Owl перерасчитать ширину

UPD: нашел в интернете примерное решение - использовать refresh.owl.carousel

написал код, но срабатывает он со 2 клика:

$('.menu_hamburger').click(function(){
    owl.trigger('refresh.owl.carousel');
});

Изначально:

После открытия меню:

После открытия инспектора страницы:

После закрытия меню:

Answer 1

Не глядя конкретно на живом сайте могу предложить разве что костыль. Повесить на закрытие меню вот это

$('.menu_hamburger').click(function () { 
    $('.owl-item').css('width',$(document).width()); 
    $('.owl-stage').css('width',$(document).width() * $('.owl-item').length); 
});

Answer 2

Решил проблему с помощью refresh.owl.carousel. Это костыль, но хоть как-то работает.

 $(document).ready(function () {
    var $owl = $('.owl-carousel').owlCarousel({
        items: 1,
        // autoWidth:true,
        loop:true,
        dots: false,
        autoplay:true,
        autoplayTimeout:10000
        // autoHeight:true
    });
    $('.menu_hamburger').click(function () {
        setTimeout(function() {
            $owl.trigger('refresh.owl.carousel');
        }, 390); //390 - это время закрытия/открытия бокового меню
    })
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Изменить txt при нажатии на Enter

Как сделать чтобы при нажатии на кнопку Enter у меня в textarea с id = 'txt', менялся текст при условии того, что я написал что-то?

228

javascript

React с запросами к серверу без redux

исследую возможности реактredux не использую по незнанию и отсутствию времени

220

javascript

Как мне собрать 4 маленьких треугольника, чтобы сделать большой треугольник?

Я хочу создать на фоне треугольник с изображениями, путем соединения 4-х треугольников, например:

205

javascript

Изменить внутренний блок iframe

Столкнулся с проблемой, не могу добраться до внутренних данных iframe, через метод jquerycontents()не получается, я так понимаю потому что на момент...

182