Adjustable height in CSS

Question

i'm trying to figure out a setting to display jQuery slider corretcly. I want to show several different slides, but the problem is that their height can vary due to the slide's title length. The slide structure is title and below is an image.

I adjusted the parent div (which contains the title and the image) to have the height:auto property.

The problem is - it doesn't work when the 'first' slide shown is 'shorter' than others. when the first slide loads, the parent div takes the dimensions of the title and the image as it's height, and if other slides have greater height, they overlap the content below the slider.

Do you have any ideas how to solve this?

Answer 1

I think you are looking for adaptive-height Jquery slider.

You can use Jquery Bxslider Adaptive plugin.Yo can go through the site and it can help you to understand the plugin and it also provide guidance for implementation.