adminLTE 教程 -4 轮播控件

Posted 2020-09-05

轮播可以放在首页用来展示需要显示的内容，其实内容没有什么可以讲解的，就是在box下面放了carousel控件。

在adminLTE演示页面搜索Carousel

<div class="box box-solid">
	<div class="box-header with-border">
		<h3 class="box-title">Carousel</h3>
	</div>
	<!-- /.box-header -->
	<div class="box-body">
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
				<li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
				<li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item">
					<img src="http://placehold.it/900x500/39CCCC/ffffff&amp;text=I+Love+Bootstrap" alt="First slide">

					<div class="carousel-caption">
						First Slide
					</div>
				</div>
				<div class="item">
					<img src="http://placehold.it/900x500/3c8dbc/ffffff&amp;text=I+Love+Bootstrap" alt="Second slide">

					<div class="carousel-caption">
						Second Slide
					</div>
				</div>
				<div class="item active">
					<img src="http://placehold.it/900x500/f39c12/ffffff&amp;text=I+Love+Bootstrap" alt="Third slide">

					<div class="carousel-caption">
						Third Slide
					</div>
				</div>
			</div>
			<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
				<span class="fa fa-angle-left"></span>
			</a>
			<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
				<span class="fa fa-angle-right"></span>
			</a>
		</div>
	</div>
	<!-- /.box-body -->
</div>