Настройка autoWidth в owl carousel 2 не отрабатывает на iphone — как исправить?

Question

[ligisayan]

Всем привет!
Есть owl carousel 2 c такими настройками

$(document).ready(function () {
   $(".marathon").owlCarousel({
    margin:15,
    //autoWidth: true,
    lazyLoad:true,
    pagination: false,
    responsiveRefreshRate: 200,
    animateOut: "fadeOut",
    responsive:{
       0:{
           items:2,
           nav:false
         },
       541:{
           items:3,
           nav:true,
           autoWidth: true  
         }
    }
   });
});

На всех устройствах с autoWidth: true отрабатывает хорошо за исключением iphone, где не успевают подгрузиться картинки, чтобы верно отработала ширина и по итогу хоть карусель и работает, но шрифты огромные. Поэтому, оставил autoWidth пока только для десктопа.

Как это можно исправить, чтобы везде отработало?

Answer 1

[ligisayan]

В моем случае сработало задание стилей

.owl-stage {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;
}

Answer 2

[Александр Черемхин]

iphone, где не успевают подгрузиться картинки, чтобы верно отработала ширина

Попробуйте до запуска карусели загрузить картинки программно. После отработки события img.load для всеx картинок запустить карусель. Возможно это сработает

Comments

[ligisayan]

Александр Черемхин это просто звучит, но едва ли возможно, т.к. используется и ленивая подгрузка изображений и кеширование.
Нашел хитрое решение ниже, может быть есть какой-то вариант с колбеками, но я у меня не получилось