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

サンプル

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

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

HTML

至って普通の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

JSはこんな感じ｡

$('.bxslider').bxSlider({
	auto: true, /* お好みで */
	adaptiveHeight: true
});

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

コメント

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