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

2024-06-14 07:55| 来源: 网络整理| 查看: 265

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即可。

【本文地址】

公司简介

联系我们