[bxSlider] How to align the heights of slides

Sample

If you create it normally, the heights will be inconsistent, but

you can align the heights like this.

Method

Assuming you have HTML like this:

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

Just add the following to your CSS.

.bxslider {
	display: flex;
}

When .bxslider is set to Flexbox, the heights of its child elements will be aligned.

The complete CSS for the sample above looks like this:

/* ↓ Code for peeking at left and right slides ↓ */
.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;
}
/* ↑ Code for peeking at left and right slides ↑ */

/* Code to align heights */
.bxslider {
	display: flex;
}

/* Slide styles */
.bxslider .slide {
	margin: 0 10px;
	padding: 20px;
	box-sizing: border-box;
	border: 2px solid #ddd;
}

Center-aligning elements within slides

To make a slider like this, with elements inside the slides also vertically centered:

Make your CSS like this.

.bxslider {
	display: flex;
}
.bxslider .slide {
	display: flex; /* Make it Flexbox */
	flex-direction: column; /* Arrange child elements vertically */
	justify-content: center; /* Vertically center */
	align-items: center; /* Horizontally center (delete if not needed) */
}

In addition to .bxslider, make .slide also Flexbox and center its child elements.

Aligning heights even with text boxes

A sample for aligning heights in a common layout like this.

Assuming you have HTML like this:

<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>

Make your CSS like this.

/* ↓ Code for peeking at left and right slides ↓ */
.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;
}
/* ↑ Code for peeking at left and right slides ↑ */

/* Code to align heights */
.bxslider {
	display: flex;
}
/* Slide styles */
.bxslider .slide {
	display: flex; /* Make it Flexbox */
	flex-direction: column; /* Arrange child elements vertically */
	margin: 0 10px;
	background: #fff;
	border: 2px solid #ddd;
}
.bxslider .slide .txt_area {
	flex-grow: 1; /* Extend .txt_area to the bottom */
	padding: 10px;
}

The key lines are 20, 24, 25, and 31.

By making .slide Flexbox and arranging its child elements vertically, and by making .txt_area extend to the bottom, the heights are aligned.

Comments

We also welcome reports such as "It worked!"