adminLTE 教程 -4 轮播控件

发布时间:2020-07-26 16:31:31 作者:wz669
来源:网络 阅读:6545

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

在adminLTE演示页面搜索Carousel

adminLTE 教程 -4 轮播控件

<div class="box box-solid">
	<div class="box-header with-border">
		<h4 class="box-title">Carousel</h4>
	</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>


推荐阅读:
  1. vue.js实现简单轮播图效果
  2. 12款经典的白富美型 jQuery 图片轮播插件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

adminlte adminlte 教程 mi te

上一篇:线程堆栈总结

下一篇:可用IP查询

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》