【bxSlider】スライドの高さを揃える方法

サンプル

普通に作ると高さがバラバラですが

このように､高さを揃えることができます｡

やり方

こんなHTMLだとすると

<div class="bxslider_wrap">
	<div class="bxslider">
		<div class="slide">この文章はダミーです。</div>
		<div class="slide">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</div>
		<div class="slide">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</div>
	</div>
</div>

CSSに以下を追記するだけ｡

.bxslider {
	display: flex;
}

.bxsliderをFlexboxにすると､子要素の高さが揃います｡

上のサンプルの全体のCSSとしてはこんな感じです｡

/* ↓ 左右のスライドをチラ見せするための記述 ↓ */
.bxslider_wrap {
	overflow: hidden;
}
.bx-wrapper {
	max-width: 360px!important;
	margin-left: auto;
	margin-right: auto;
	background: none;
	border: none;
	box-shadow: none;
}
.bx-viewport {
	overflow: visible!important;
}
/* ↑ 左右のスライドをチラ見せするための記述 ↑ */

/* 高さを揃える記述 */
.bxslider {
	display: flex;
}

/* スライドのスタイル */
.bxslider .slide {
	margin: 0 10px;
	padding: 20px;
	box-sizing: border-box;
	border: 2px solid #ddd;
}

スライド内の要素も中央揃え

スライド内の要素も縦方向中央揃えにして､こんなスライダーにするには

CSSをこのようにします｡

.bxslider {
	display: flex;
}
.bxslider .slide {
	display: flex; /* Flexboxにする */
	flex-direction: column; /* 子要素を縦並びに */
	justify-content: center; /* 縦方向中央揃え */
	align-items: center; /* 横方向中央揃え (不要なら消す) */
}

.bxsliderに加え .slide もFlexboxにして､子要素を中央に配置します｡

テキストボックスでも高さ揃え

よくあるこういうレイアウトで高さを揃えるサンプル｡

こんなHTMLだとすると

<div class="bxslider_wrap">
	<div class="bxslider">
		<div class="slide">
			<p><img src="img01.jpg"></p>
			<div class="txt_area">
				<p>この文章はダミーです。</p>
			</div>
		</div>
		<div class="slide">
			<p><img src="img02.jpg"></p>
			<div class="txt_area">
				<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
			</div>
		</div>
		<div class="slide">
			<p><img src="img03.jpg"></p>
			<div class="txt_area">
				<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
			</div>
		</div>
		<div class="slide">
			<p><img src="img04.jpg"></p>
			<div class="txt_area">
				<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
			</div>
		</div>
	</div>
</div>

このようなCSSにします｡

/* ↓ 左右のスライドをチラ見せするための記述 ↓ */
.bxslider_wrap {
	overflow: hidden;
}
.bx-wrapper {
	max-width: 360px!important;
	margin-left: auto;
	margin-right: auto;
	background: none;
	border: none;
	box-shadow: none;
}
.bx-viewport {
	overflow: visible!important;
}
/* ↑ 左右のスライドをチラ見せするための記述 ↑ */

/* 高さを揃える記述 */
.bxslider {
	display: flex;
}
/* スライドのスタイル */
.bxslider .slide {
	display: flex; /* Flexboxにする */
	flex-direction: column; /* 子要素を縦並びに */
	margin: 0 10px;
	background: #fff;
	border: 2px solid #ddd;
}
.bxslider .slide .txt_area {
	flex-grow: 1; /* .txt_areaを下まで伸ばす */
	padding: 10px;
}

肝心なのは20行目､24､25行目､31行目です｡

.slideをFlexboxにして､その子要素を縦並びに｡ .txt_areaは下まで伸びるようにして､高さを揃えています｡

コメント

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