0

This is the page in question: http://k2ld.91dev.com.au/project/balwyn-residence/

The carousel uses autoheight:true.

On certain mobile browsers including Dolphin, iPhone, Google Nexus 4 (when viewed in Chrome Dev Tools), the .owl-wrapper-outer container will have a small inline height applied which crops the first image.

Once you swipe to the left and back the height is recalculated and all is fine.

My Owl code looks like this (inside a document.ready):

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

I originally used Owl Carousel 1 and then switched to version 2 to see if the issue went away... it didn't.

How can I get the carousel to calculate it's height once the images are fully loaded?

gurtfrobe
  • 316
  • 6
  • 17

3 Answers3

2

I created a script manually using some owl properties, make the creation of a function to create the carousel, it takes the individual height of each element, and arrow for the element of each item. With this we can adjust the height of the carousel at any resolution.

In your case, you would do the following:

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

I hope this helps!

gustavohenke
  • 40,997
  • 14
  • 121
  • 129
Otávio Mello Moreira
  • 51
  • 7
0

I've ended up changing sliders to BX Slider which offers similar functionality.

gurtfrobe
  • 316
  • 6
  • 17
0

use 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'
            });
        });
    });
Rocket
  • 1