Bootstrap 4 轮播图淡入淡出,上下滚动效果

bootstrap 4 轮播图代码如下,默认代码效果为左右滚动轮播:


<div id="carouselExampleIndicators" class="carousel slide carousel-vertical " data-ride="carousel">
<ol class="carousel-indicators">
<li style="list-style-type: none">
<ol class="carousel-indicators">
<li class="active" data-target="#carouselExampleIndicators" data-slide-to="0"></li>
</ol>
</li>
</ol>
<ol class="carousel-indicators">
<li style="list-style-type: none">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
</li>
</ol>
<ol class="carousel-indicators">
<li style="list-style-type: none">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="./assets/img/2.jpg" alt="First slide" />
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
...

</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="./assets/img/1.jpg" alt="Second slide" />
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
...

</div>
</div>
<div class="carousel-item"><img class="d-block w-100" src="./assets/img/2.jpg" alt="Third slide" />
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
...

</div>
</div>
</div>
<a class="carousel-control-prev" role="button" href="#carouselExampleIndicators" data-slide="prev">

<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" role="button" href="#carouselExampleIndicators" data-slide="next">

<span class="sr-only">Next</span>
</a>

</div>

在bootstrap 轮播图的地方增加如下代码


/* bootstrap 轮播图淡入淡出 */
.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;
}
/* bootstrap 4 轮播图 垂直滚动*/
.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%);
}
博主水平有限,难免出错,请提出您的意见,咨询QQ:825641026

发表评论