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 {
5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3
}
);
transform: translateY(-100 {
5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3
}
);
}
.carousel-vertical .carousel-inner .active.carousel-item-right,
.carousel-vertical .carousel-inner .carousel-item-next {
-webkit-transform: translateY(100 {
5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3
}
);
transform: translateY(100 {
5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3
}
);
}

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

<div id="slides" data-ride="carousel">
<ul>
<li data-target="#slides" data-slide-to="0"></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>
<div><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="" alt="幻灯片" /></a></div>
<div><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="" alt="幻灯片" /></a></div>
<div><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="" alt="幻灯片" /></a></div>
<div><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="" alt="幻灯片" /></a></div>
</div><a href="#slides" rel="external nofollow"  rel="external nofollow"  data-slide="prev"><span></span></a><a href="#slides" rel="external nofollow"  rel="external nofollow"
data-slide="next"><span></span></a>
</div>

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