0

I am trying to make a carousel with owl carousel with vertical and horizontal images, I would like to have the same height for both type of images and the width auto. I don't understand if I can achieve this only with the css or I need to use js to update the height of every image

this is my codepen http://codepen.io/mp1985/pen/LNejmO

$('.owl-carousel').owlCarousel({
    loop:true,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        800:{
            items:3
        },
        1000:{
            items:3
        }
    }
});

any help or suggestion?

mattia
  • 591
  • 2
  • 7
  • 22
  • you have the answer here: http://stackoverflow.com/questions/21574698/image-slider-maintaining-equal-height-for-all-images-while-keeping-slider-respo – erani_246 Apr 07 '16 at 21:30

1 Answers1

1

If you set a max-height on the image with CSS

.owl-carousel .item img{
  max-height:600px;
}

And update the JS function to include

autoWidth:true,

This should work

See demo here http://www.owlcarousel.owlgraphic.com/demos/autowidth.html

Ben Metcalfe
  • 54
  • 4