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标记美化--JS式插件、后期加载
Apr 01 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
ionic实现底部分享功能
May 11 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
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/03/20 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
Python中的rjust()方法使用详解
2015/05/19 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python实现微信打飞机游戏
2020/03/24 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
印度低票价航空公司:GoAir
2017/10/11 全球购物
清明节扫墓活动方案
2014/03/02 职场文书
大学生个人求职信
2014/06/02 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android