Bootstrap4 Carousel轮播非常简单好用，默认左右滚动效果，但通常的需求是三种情况：左右滚动（水平滚动）、上下滚动（垂直滚动）、淡入淡出。
通过增加少量的CSS，就可以为Bootstrap4 Carousel轮播增加上下滚动（垂直滚动）、淡入淡出效果。
新增的CSS如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .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如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <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即可。
原文链接：https://xiaohost.com/2339.html，转载请注明出处。
