スライダーを簡単に実装できるjQueryのプラグイン「jquery.bxslider.js」。
カルーセル表示をした場合に、掲載テキスト量で高さが揃わない場合が出てきます。
CSSでmin-height指定をしてもいいのですが、それだと拡張性がありません。
そこで要素の高さを揃えるJavaScriptライブラリ「jquery.heightLine.js」を使用したいと思います。

1. heightLineの基本的な使い方
2. bxSliderでheightLineを使用する方法
3. 解説

heightLineの基本的な使い方

ダウンロード

下記ページ内「ダウンロード」から必要ファイルをダウンロードします。

https://blog.webcreativepark.net/2013/10/21-112000.html

ファイルの読み込み

ダウンロード後、必要なjsファイルを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery.heightLine.js"></script>

HTML

<ul class="heightLine">
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。</li>
</ul>

javascript

$(function(){
	$(".heightLine li").heightLine();
});

bxSliderでheightLineを使用する方法

通常の指定ではheightLineはbxSlider要素に効きません。
そこでbxSliderに用意されているCallback関数「onSliderLoad」を使います。
「onSliderLoad」はスライダーが読み込みこまれたタイミングで実行されます。

HTML

<ul class="bxslider">
<li><img src="img/img01.jpg" title=""><br />
テキストが入ります。テキストが入ります。テキストが入ります</li>
<li><img src="img/img02.jpg" title=""><br />
テキストが入ります。テキストが入ります。</li>
<li><img src="img/img03.jpg" title=""><br />
テキストが入ります。</li>
</ul>

javascript

$(function(){
	$('.bxslider').bxSlider({
		minSlides: 3,
		maxSlides: 3,
		moveSlides: 1,
		slideWidth: 300,
		slideMargin: 20,
		onSliderLoad: function(index){
			$(".bxslider li").heightLine();
		}
	});
});

解説

スライダーが読み込まれたタイミングでheightLineが発動し、class「bxslider」以下のli要素に同一のheightが指定されます。
これでカルーセル要素の内容量が違っても高さを揃える事が可能です。

補足

slideWidthの値を％指定してレスポンシブ時に「スライドの数」を変えずに「スライドの幅」を変える方法についてはこちら。

bxsliderでslideWidthの値を%指定してレスポンシブ時に「スライドの数」を変えずに「スライドの幅」を変える

スライダーを簡単に実装できるjQueryのプラグイン「jquery.bxslider.js」では、カルーセル表示が可能です。そのカルーセル表示の際に設定必須のオプションに「slideWidth」があります。「slideWidth」はスライドの幅を指定するオプショ…

https://sendai-kuraso.com/work/html-css-js-php/bxslider-carousel.html

bxslider関連記事

bxsliderに関する記事は他にもありますので、よろしければどうぞ

• bxsliderで100％幅の背景画像をスライド（切り替え）させる
• スライド要素の数でbxSliderの挙動を変え、想定の数以下の場合はスライドさせない
• jquery.heightLine.jsをbxSliderで使い、カルーセル表示で要素の高さを揃える方法
• bxsliderでslideWidthの値を％指定してレスポンシブ時に「スライドの数」を変えずに「スライドの幅」を変える