CODEWITHSUNDEEP
javascriptjqueryowl-carouselowl-carousel-2
gurtfrobe
gurtfrobe

Reputation: 316

Owl Carousel - Auto Height mobile issue

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?

Upvotes: 0

Views: 2558

Answers (3)

Rocket
Rocket

Reputation: 1

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'
            });
        });
    });

Upvotes: 0

Otávio Mello Moreira
Otávio Mello Moreira

Reputation: 51

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!

Upvotes: 2

gurtfrobe
gurtfrobe

Reputation: 316

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

Upvotes: 0

Related Questions