Сова Carousel - Авто Высота мобильный выпуск

Question

Это страница вопрос: http://k2ld.91dev.com.au/project/balwyn-residence/

Карусель использует autoheight:true.

В некоторых мобильных браузерах, включая Dolphin, iPhone, Google Nexus 4 (при просмотре в Chrome Dev Tools), контейнер .owl-wrapper-outer будет иметь небольшую встроенную высоту, наносимую первым изображением.

После прокрутки влево и назад высота пересчитывается, и все в порядке.

Мой Owl код выглядит следующим образом (внутри document.ready):

// Owl Slider 
$(".owl-carousel").owlCarousel({ 
    items: 1, 
    loop: true, 
    autoHeight: true 
}); 

Первоначально я использовал Owl Carousel 1, а затем перешли к версии 2, чтобы увидеть, если проблема ушла ... это не так.

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

Answer 1

Я поменял ползунки на BX Slider, который предлагает аналогичную функциональность.

Answer 2

Я создал сценарий вручную, используя некоторые свойства совы, создав функцию для создания карусели, она принимает индивидуальную высоту каждого элемента и стрелку для элемента каждого элемента. С этим мы можем регулировать высоту карусели при любом разрешении.

В вашем случае, вы могли бы сделать следующее:

$(".owl-carousel").owlCarousel({ 
    items: 1, 
    loop: true, 
    afterAction : afterAction 
}); 


function afterAction() { 
    var elem = this.owl.owlItems; 
    var index = this.owl.visibleItems; 

    var height = elem.eq(index).height(); 

    //.owl-wrapper is the element that we are high. 
    elem.parents('.owl-wrapper, .owl-carousel').css('height', height); 
} 

Я надеюсь, что это помогает!

Answer 3

использование imagesLoaded

jQuery(document).ready(function() { 
     jQuery('#div_id').imagesLoaded(function() { 
      jQuery('#div_id .scroll-box').owlCarousel({ 
       items: 1, 
       nav: false, 
       pagination: false, 
       autoHeight: true, 
       loop: true, 
       lazyLoad: true, 
       animateOut: 'slideOutRight', 
       animateIn: 'pulse' 
      }); 
     }); 
    });