【bxSlider】スライドを上下中央揃えにする方法

サンプル

画像が左に寄っちゃってますが､必要最低限に組み込むとこんな感じ｡

画像が上下方向に中央揃えになってると思います｡

やり方

こんなHTMLだとすると

<div class="bxslider">
	<div class="slide"><img src="img/img01.jpg"></div>
	<div class="slide"><img src="img/img02.jpg"></div>
	<div class="slide"><img src="img/img03.jpg"></div>
	<div class="slide"><img src="img/img04.jpg"></div>
</div>

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

.bxslider {
	display: flex;
	align-items: center;
}

Flexboxで.bxsliderの子要素を上下中央揃えにしています｡

追加でもう2つサンプルをご紹介します｡

横方向にも中央揃え

こんなスライダーにするには

CSSに以下を追記｡

.bxslider {
	display: flex;
	align-items: center;
}

.bxslider02 .slide img {
	margin: 0 auto;
}

7行目で､imgを左右中央揃えにしています｡

左右のスライドも見せる

こんなスライダーにするには

CSSに以下を追記｡

.bx-wrapper {
	overflow: hidden;
	border: none;
	box-shadow: none;
}
.bx-viewport {
	overflow: visible !important;
	width: 300px!important; //スライドの幅を指定
	margin: 0 auto;
}
.bxslider {
	display: flex;
	align-items: center;
}
.slide img {
	margin: 0 auto;
}

コメント

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