Bootstrap4 Carousel轮播上下滚动、淡入淡出效果

Bootstrap4 Carousel轮播非常简单好用，默认左右滚动效果，但通常的需求是三种情况：左右滚动（水平滚动）、上下滚动（垂直滚动）、淡入淡出。

通过增加少量的CSS，就可以为Bootstrap4 Carousel轮播增加上下滚动（垂直滚动）、淡入淡出效果。

新增的CSS如下：

.carousel-fade .carousel-inner .carousel-item {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	transition-property: opacity;
}
.carousel-fade .carousel-inner .carousel-item,
.carousel-fade .carousel-inner .active.carousel-item-left,
.carousel-fade .carousel-inner .active.carousel-item-right {
	opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {
	opacity: 1;
}

.carousel-vertical .carousel-inner .carousel-item-next.carousel-item-left,
.carousel-vertical .carousel-inner .carousel-item-prev.carousel-item-right {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.carousel-vertical .carousel-inner .active.carousel-item-left,
.carousel-vertical .carousel-inner .carousel-item-prev {
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}
.carousel-vertical .carousel-inner .active.carousel-item-right,
.carousel-vertical .carousel-inner .carousel-item-next {
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}

Bootstrap Carousel轮播上下滚动HTML如下：

<div id="slides" class="carousel slide carousel-vertical" data-ride="carousel">
	<ul class="carousel-indicators">
		<li data-target="#slides" data-slide-to="0" class="active"></li>
		<li data-target="#slides" data-slide-to="1"></li>
		<li data-target="#slides" data-slide-to="2"></li>
		<li data-target="#slides" data-slide-to="3"></li>
	</ul>
	
	<div class="carousel-inner">
		<div class="carousel-item active">
			<a href="#"><img src="" alt="幻灯片" /></a>
		</div>
		<div class="carousel-item">
			<a href="#"><img src="" alt="幻灯片" /></a>
		</div>
		<div class="carousel-item">
			<a href="#"><img src="" alt="幻灯片" /></a>
		</div>
		<div class="carousel-item">
			<a href="#"><img src="" alt="幻灯片" /></a>
		</div>
	</div>
	
	<a class="carousel-control-prev" href="#slides" data-slide="prev">
		<span class="carousel-control-prev-icon"></span>
	</a>
	<a class="carousel-control-next" href="#slides" data-slide="next">
		<span class="carousel-control-next-icon"></span>
	</a>
</div>

淡入淡出的HTML与上下滚动的基本相同，只需将Class carousel-vertical换为carousel-fade即可。而水平滚动只需要删除Class carousel-vertical即可。

Typora