thinkphp标签实现bootsrtap轮播carousel实例代码


Posted in Javascript onFebruary 19, 2017

由于轮播carousel第一个div需要设置active样式才能正常显示,上面的圆点也同样需要数字,

使用volist标签在循环的同时可以取得下标(foreach,for标签实现不了)

<div class="Container">
<!-- carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<volist name="bopic" id="xt">
<li data-target="#carousel-example-generic" data-slide-to="{$i-1}" class="<if condition="$i eq 1 ">active</if>"></li>
</volist>
</ol>
<div class="carousel-inner">
<volist name="bopic" id="xt">
<div class='item <if condition="$i eq 1 ">active</if>'>
<img src="{$xt.page_bopic_image}" alt="{$xt.page_bopic_seo}"/>
</div>
</volist>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /.carousel -->
</div>

以上所述是小编给大家介绍的thinkphp标签实现bootsrtap轮播carousel实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 #Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 #Javascript
RequireJs的使用详解
Feb 19 #Javascript
Vue.js -- 过滤器使用总结
Feb 18 #Javascript
JS打开摄像头并截图上传示例
Feb 18 #Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 #Javascript
AngularJS表单提交实例详解
Feb 18 #Javascript
You might like
php删除文本文件中重复行的方法
2015/04/28 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
深入浅析Vue中的Prop
2018/06/10 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
linux环境中没有网络怎么下载python
2019/07/07 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
python 写一个文件分发小程序
2020/12/05 Python
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
公共事业管理本科生求职信
2013/10/07 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
体育课课后反思
2014/04/24 职场文书
校园文明倡议书
2014/05/16 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
技术员个人工作总结
2015/03/03 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python