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如下：
淡入淡出的HTML与上下滚动的基本相同，只需将Class carousel-vertical换为carousel-fade即可。而水平滚动只需要删除Class carousel-vertical即可。
原创文章，作者：，如若转载，请注明出处：https://ce.771633.xyz/1682.html
