Bootstrap4 Carousel轮播上下滚动、淡入淡出效果
文 / @UTHEME
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插件:All in One WP Security & Firewall 怎么样(附:AIOWPS拦截垃圾评论设置教程) 2023-01-26 21:51:51
-
在 PHP 中如何通过一行代码就交换两个变量的值 2023-01-26 00:18:31
-
WordPress主题:Pin Premium (WordPress仿Pinterest样式瀑布流主题) 2023-01-25 23:36:43
-
免费WordPress主题:Maupassant(WordPress中文博客主题) 2023-01-25 23:31:29
-
WordPress响应式图片(Responsive Image)功能关闭:取消WordPress图片宽带和高度参数 2023-01-24 10:49:32
-
wordpress报错:修复MySQL 1064错误问题 错误原因和解决方法 2023-01-24 10:42:04
-
WP Rocket – 强大的WordPress缓存加速优化插件(附:WP Rocket插件设置过程与七折优惠码) 2023-01-24 00:41:44
-
WordPress 实现静态化搜索结果页面的方法 2023-01-24 00:41:44
-
get_permalink、get_the_permalink和the_permalink有啥区别? 2023-01-24 00:41:08
-
为什么选用WordPress搭建独立站? 2023-01-23 20:25:21