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

Bootstrap 4 轮播图代码如下，默认代码效果为左右滚动轮播：

Bootstrap 4 轮播图 HTML 结构

<div id="carouselExampleIndicators" class="carousel slide" 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>

很多伙伴后想要改变轮播的方式，HTML结构无需改变，下面是Bootstrap 4 轮播图实现但如淡出或者上下滚动轮播图的方式CSS:

Bootstrap 4 轮播图淡入淡出

/* 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 轮播图 垂直上下滚动

/* 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%);
}

您可以选择自己喜欢的轮播方式，将代码放置在style.css文件中，将HTML代码的第一行中的class="carousel slide"中增加：

  • carousel-vertical（垂直滚动）；
  • carousel-fade（淡入淡出）；

发表评论

游客欢迎您