0

Такая проблема:
Я подключил 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');
});

Изначально: введите сюда описание изображения

После открытия меню:
введите сюда описание изображения

После открытия инспектора страницы: введите сюда описание изображения

После закрытия меню: введите сюда описание изображения

2
  • А разве данное боковое меню у вас не fixed или absolute?
    – Arsen
    3 дек 2018 в 10:05
  • Забыл описать, боковое меню fixed, но при открытии меню, owl-carousel меняет ширину с 100% на 80: 3 дек 2018 в 10:07

2 ответа 2

0

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

$('.menu_hamburger').click(function () { 
    $('.owl-item').css('width',$(document).width()); 
    $('.owl-stage').css('width',$(document).width() * $('.owl-item').length); 
});
6
  • Сейчас проверим. Я с js на вы, поэтому я понимаю, что легко. 3 дек 2018 в 10:11
  • Не помогло(( $('.menu_hamburger').click(function () { console.log("works"); $('.owl-item').css('width',$(document).width()); }); 3 дек 2018 в 10:20
  • width у owl-item в инспекторе не меняется?
    – boneskhv
    3 дек 2018 в 10:27
  • Да, но там фишка еще в том, что надо менять width и translate3d у .owl-stage. Может есть какая-то иммитация изменения размера экрана на ноль? Тогда owl сам пересчитает ширину 3 дек 2018 в 10:33
  • да - меняется, или да - не меняется? owl-stage (как я понимаю это суммарная ширина всех слайдов) тоже можно поменять (в ответе привел код как это сделать). А что касается translate3d, то там на скрине не видно полностью че он из себя представляет.
    – boneskhv
    3 дек 2018 в 10:36
0

Решил проблему с помощью 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 - это время закрытия/открытия бокового меню
    })
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.