【slick.js】スライドの高さを揃える方法

サンプル

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

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

やり方

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

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

height: auto!important;の !important は無くても良い場合がありますが､経験上入れておいたほうが良いです｡

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

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

CSSをこのようにします｡

.slick-track {
	display: flex;
}
.slick-slide {
	height: auto!important;
	display: flex; /* スライドをFlexboxに */
	flex-direction: column; /* 子要素を縦並びに */
	justify-content: center; /* 縦方向中央揃え */
	align-items: center; /* 横方向中央揃え (任意) */
}

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

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

こんなHTMLだとすると

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

このようなCSSにします｡

.slider .slick-track {
	display: flex; /* 高さを揃える記述 */
}

.slider .slick-slide {
	height: auto!important; /* 高さを揃える記述 */
	display: flex; /* Flexbox */
	flex-direction: column; /* 子要素を縦並びに */
	/* 以下お好みで */
	width: 80vw;
	max-width: 300px;
	margin: 0 10px;
	box-sizing: border-box;
	border: 2px solid #ddd;
}

.slider .slick-slide .txt_area {
	flex-grow: 1; /* .txt_areaを下まで伸ばす */
	padding: 10px;
	background: #fff;
}

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

コメント

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