[bxSlider] Sample of the "adaptiveHeight" option to make the slider height variable for each slide

Sample

We have prepared images with varying heights.

You will notice that the slider's height changes to match the height of the current slide.

HTML

We will create a very standard bxSlider.

<div class="bxslider">
	<div class="slide"><img src="img/img01.jpg"></div>
	<div class="slide"><img src="img/img02.jpg"></div>
	<div class="slide"><img src="img/img03.jpg"></div>
	<div class="slide"><img src="img/img04.jpg"></div>
</div>

JS

The JS looks like this.

$('.bxslider').bxSlider({
	auto: true, /* optional */
	adaptiveHeight: true
});

You can set this by adding "adaptiveHeight: true" on the 3rd line.

Comments

We also welcome reports such as "It worked!"