[bxSlider] How to align slides to the vertical center

Sample

The images are left-aligned, but this is what it looks like when implemented with the bare minimum.

The images should bevertically centered.

Method

Assuming you have HTML like this:

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

Just add the following to your CSS.

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

This uses Flexbox to vertically center the child elements of .bxslider.

Here are two more samples.

Also horizontally centered

To create a slider like this:

Add the following to your CSS.

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

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

Line 7 horizontally centers the img.

Show adjacent slides

To create a slider like this:

Add the following to your CSS.

.bx-wrapper {
	overflow: hidden;
	border: none;
	box-shadow: none;
}
.bx-viewport {
	overflow: visible !important;
	width: 300px!important; // Specify slide width
	margin: 0 auto;
}
.bxslider {
	display: flex;
	align-items: center;
}
.slide img {
	margin: 0 auto;
}

Comments

We also welcome reports such as "It worked!"