Bootstrap4 Carousel轮播上下滚动、淡入淡出效果
文 / @WordPress主题
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即可。

相关文章
-
搭建一个WordPress网站需要多少成本 2023-11-06 00:09:51
-
Symlink介绍(附:如何使用Symlink进行WordPress开发) 2023-11-05 23:38:32
-
让WordPress实现数据库同步的插件:HyperDB 2023-10-24 23:40:49
-
allegro电商平台值得做吗(附:2023年Allegro注册流程指南) 2023-10-08 21:53:39
-
印度跨境电商平台有哪些(附:印度跨境电商做什么产品好) 2023-10-08 21:34:23
-
跨境电商必看的几大海外二手电商平台 2023-10-08 18:04:42
-
WordPress同城互联网产品解决方案:UBASE 2023-10-03 16:40:39
-
WordPress网站的安全插件:wordfence 2023-09-14 09:25:18
-
WordPress 6.3 支持在手动更新插件和主题失败后回滚旧版本 2023-08-28 16:58:45
-
WordPress 6.3版本(2023年8月)性能提升了哪些? 2023-08-28 16:56:02