[slick.js] How to align the heights of slides

Sample

Normally, the heights would be inconsistent, but

Like this, you can align the heights.

How to

Just add the following to your CSS.

.slick-track {
	display: flex;
}
.slick-slide {
	height: auto!important;
}

The !important in height: auto!important; may not always be necessary, but based on experience, it's better to include it.

Also center-align elements within slides

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

Here's how to set up the CSS.

.slick-track {
	display: flex;
}
.slick-slide {
	height: auto!important;
	display: flex; /* Make slide a Flexbox */
	flex-direction: column; /* Arrange child elements vertically */
	justify-content: center; /* Vertically center-align */
	align-items: center; /* Horizontally center-align (optional) */
}

Aligning heights even with text boxes

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

Assuming HTML like this:

<div class="slider">
	<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>

Use CSS like this:

.slider .slick-track {
	display: flex; /* Code to align heights */
}

.slider .slick-slide {
	height: auto!important; /* Code to align heights */
	display: flex; /* Flexbox */
	flex-direction: column; /* Arrange child elements vertically */
	/* Optional below */
	width: 80vw;
	max-width: 300px;
	margin: 0 10px;
	box-sizing: border-box;
	border: 2px solid #ddd;
}

.slider .slick-slide .txt_area {
	flex-grow: 1; /* Extend .txt_area to the bottom */
	padding: 10px;
	background: #fff;
}

Make .slide a Flexbox, arrange its child elements vertically. .txt_area is extended to the bottom to align heights.

Comments

We also welcome reports such as "It worked!"