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 相关文章推荐
Javascript原型链和原型的一个误区
Oct 22 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
python黑魔法之参数传递
2016/02/12 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
pandas 时间格式转换的实现
2019/07/06 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
什么是SCM(软件配置管理)
2014/08/16 面试题
工商企业管理应届生求职信
2013/11/03 职场文书
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
双创工作实施方案
2014/03/26 职场文书
爱护草坪标语
2014/06/24 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
预备党员考察意见范文
2015/06/01 职场文书
儿子满月酒致辞
2015/07/29 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python