Owl Carousel - проблем с автоматична височина за мобилни устройства

Това е въпросната страница: 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, за да видя дали проблемът е изчезнал... не е.

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


javascript jquery owl-carousel owl-carousel-2
person gurtfrobe    schedule 20.02.2015    source източник

Отговори (3)


arrow_upward
2
arrow_downward

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

Във вашия случай бихте направили следното:

$(".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);
}

Надявам се това да помогне!

person Otávio Mello Moreira    schedule 06.11.2015

arrow_upward
0
arrow_downward

В крайна сметка смених плъзгачите на BX Slider, който предлага подобна функционалност.

person gurtfrobe    schedule 20.02.2015

arrow_upward
0
arrow_downward

използвай 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'
            });
        });
    });
person Rocket    schedule 26.10.2017