首页 WordPress教程 Bootstrap4 Carousel轮播上下滚动、淡入淡出效果
正文 评论

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

Bootstrap4 Carousel轮播非常简单好用,只不过默认是左右滚动效果,但我们通常的需求是三种情况:左右滚动(水平滚动)、上下滚动(垂直滚动)、淡入淡出。

所以我们通过增加少量的CSS,就可以为Bootstrap4 Carousel轮播增加上下滚动(垂直滚动)、淡入淡出效果。

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 {
			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如下:

<div id="slides" data-ride="carousel">
	<ul>
		<li data-target="#slides" data-slide-to="0"></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>
		<div><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="" alt="幻灯片" /></a></div>
		<div><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="" alt="幻灯片" /></a></div>
		<div><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="" alt="幻灯片" /></a></div>
		<div><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="" alt="幻灯片" /></a></div>
	</div><a href="#slides" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  data-slide="prev"><span></span></a><a href="#slides" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" 
		data-slide="next"><span></span></a>
</div>

 

淡入淡出的HTML与上下滚动的基本相同,只需将Classcarousel-vertical换为carousel-fade即可。而水平滚动只需要删除Classcarousel-vertical即可。

-=||=-收藏赞 (1)
更多主题
v1.0.0
小程序收录免费WordPress主题:XCX主题
¥ 0 关注:23,600
详情
单栏极简文艺WordPress博客主题:Diaspora主题
¥ 0 关注:22,587
详情
简约黑白WordPress个人博客主题:Personal主题
¥ 0 关注:22,339
详情
功能丰富切轻量的WordPress虚拟资源主题:Rizhuti主题
¥ 599 关注:20,522
详情
v1.0.0
一款简约单栏的免费WordPress博客主题:itheme主题
¥ 0 关注:20,452
详情
WordPress版WebStack导航主题:WebStack主题
¥ 0 关注:18,856
详情
回复
1 条评论

不要再留垃圾评论了,主题君整理资源不容易,留几句鼓励的话吧。

主题君

你学废了吗?

我很懒。