怎么引用bootstrap轮播图
提示:这些功能都是需要插件支持的,既然是bootstrap当然不能少它的css和js文件的引入,另外还有JQuery.js,他们的版本都在3.0以上就可以了!!
1.直接引用bootstrap里的类carousel slide
做一个div容器;
2.ul标签 添加类carousel-indicators
做相应个数的图像选择器,就是那些小圆点!
3.再做一个div容器加类carousel-inner
包裹图片;
4.接下来创建一个个的图片项目包裹在div 类item中,在里面如果还需要对图片做其他说明就继续加div 类carousel-caption
添加文字说明;
5.最后一步是添加图片左右控制,a标签 添加标签类left carousel-control
和 类right-carousel-control
分别设置左右的控制键;
选取要跳转的id #carousel-example-generic
,data-slide=“left”/“right”
;
里面加上左右控制键显示的图片icon,这个可以引用 类glyphicon glyphicon-chevron-right
和 glyphicon glyphicon-chevron-left
,自己也可以做啊,相信自己的审美 -^ .^-
<div data-ride="carousel">
<!-- Indicators --> <ul class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ul> <!-- Wrapper for slides -->
<div role="listbox">
<div class="item active">
<img src="https://www.swvq.com/bootstrap/img/0e4eb42dd4acd3aff05b1fee14820af0.jpg"/>
<div class="carousel-caption">
<h1>轮播1的标题</h1>
<p>这里是轮播图1的说明</p>
</div>
</div>
<div class="item">
<img src="https://www.swvq.com/bootstrap/img/2fc4c4554273a93933af18f8a4239275.jpg"/>
<div class="carousel-caption">
<h1>轮播2的标题</h1>
<p>这里是轮播图2的说明</p>
</div>
</div>
<div class="item">
<img src="https://www.swvq.com/bootstrap/img/28058504efd74a112e721e048e38aeb9.jpg"/>
<div class="carousel-caption">
<h1>轮播3的标题</h1>
<p>这里是轮播图3的说明</p>
</div>
</div>
</div> <!-- Controls -->
<a href="https://www.swvq.com/bootstrap/426241.html#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span> </a>
<a href="https://www.swvq.com/bootstrap/426241.html#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
效果图:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbhhbc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01