0

I am attempting to use the autoHeight feature in Owl Carousel 2 - which I have created an example CodePen of here:

Example

When you view the markup through inspector tools, you can see that the .owl-height elements height is indeed being updated, but the child elements are effecting the overall height.

I tried updating the .owl-stage to be position: absolute; - but it had other problematic effects, and I'm trying not to alter the original plugin files at all if possible... especially since it's a built in feature.

Is there something obvious I'm missing in using the autoHeight feature? The plugin appears to be included with Owl, but I could be missing something.

Owl AutoHeight Documentation in case it helps!

Thanks for any help!

Terence Devine
  • 115
  • 1
  • 13

1 Answers1

0

You seem to be missing some of the CSS for the navigation.

Turning the navigation off fixes the issue (demo):

$('.owl-carousel').owlCarousel({
    nav: false,
    items: 1,
    margin: 20,
    dots: true,
    autoHeight: true
});

Alternatively, check that you have included the owl-theme.scss file from GitHub. (Or you could style it yourself of course.)

Turnip
  • 35,836
  • 15
  • 89
  • 111