Owl Carousel – проблема с мобильным устройством Auto Height

Это рассматриваемая страница: 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

использовать изображенияЗагружено

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