I have implemented flexslider with the smoothHeight property set to true:
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
slideshow: true,
controlNav: false,
directionNav: false,
slideshowSpeed: "7000",
animationSpeed: "600",
smoothHeight: true,
});
});
I am using images of various heights, expecting the slider to adjust accordingly. However, it is not doing so and I'm struggling to determine why.
The slider is integrated with Bootstrap and has a specified max-height of 500px above a viewport width of 992px (a bootstrap breakpoint).
Below 992px viewport width, the slider height is allowed to be dynamic based on its contents.
Feel free to check the rendering below 992px: view rendered result on jsfiddle
You can also access the editable code on jsfiddle here: editable jsfiddle link
Any advice or suggestions would be greatly appreciated. Thank you!