[slick.js] Sample of the 'adaptiveHeight' option to make the slider height variable for each slide

Sample

I 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 slick slider.

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

JS

The JS looks like this.

$(".slider").slick({
	centerMode: true, //Optional
	variableWidth: true, //Optional
	adaptiveHeight: true, //Make slider height variable
});

You can set this by adding 'adaptiveHeight: true' on line 5.

You can also fix the height of the pager

Of course, you can also fix the height of the left and right pagers.

It's hard to click the pager if its position changes every time you move the slide, isn't it?

Comments

We also welcome reports such as 'It worked!'