全屏轮播图-freejs.net代码演示

首页>>焦点图>>全屏轮播图(2023-05-23)

全屏轮播图

带文字介绍的全屏轮播图

XML/HTML Code

<div class="carousel">
<div class="carousel-item active"
style="background-image: url('../demo1.jpg'); background-size: 100% auto;">
<div class="carousel-text">Picture 1</div>
</div>
<div class="carousel-item" style="background-image: url('../demo2.jpg'); background-size: 100% auto;">
<div class="carousel-text">Picture 2</div>
</div>
<div class="carousel-item" style="background-image: url('../demo3.jpg'); background-size: 100% auto;">
<div class="carousel-text">Picture 3</div>
</div>
<div class="carousel-item" style="background-image: url('../demo4.jpg'); background-size: 100% auto;">
<div class="carousel-text">Picture 4</div>
</div>
<div class="carousel-nav">
<button class="active"></button>
<button></button>
<button></button>
<button></button>
</div>
</div>