【slick.js】スライド毎にスライダーの高さを可変にするオプション「adaptiveHeight」のサンプル

サンプル

画像のサイズ高さがバラバラな画像を用意しました｡

スライドの高さに合わせてスライダーの高さが変わっているのがわかると思います｡

HTML

至って普通のslickスライダーを作成します｡

<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

JSはこんな感じ｡

$(".slider").slick({
	centerMode: true, //お好みで
	variableWidth: true, //お好みで
	adaptiveHeight: true, //スライダーの高さを可変に
});

5行目の「adaptiveHeight: true」を追加することで設定できます｡

ページャーの高さを固定することもできる

もちろん､左右のページャーの高さを固定することもできます｡

スライドを動かす度にページャーの位置が変わると押しづらいですよね｡

コメント

「できました！」などの報告もお待ちしております｡