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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
详解js中的几种常用设计模式
Jul 16 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 项目的方法
2007/01/02 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
Nuxt.js实战详解
2018/01/18 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
Windows下安装python2和python3多版本教程
2017/03/30 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
python生成二维码的实例详解
2017/10/29 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
python selenium循环登陆网站的实现
2019/11/04 Python
基于python3的socket聊天编程
2020/02/17 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
Django自带的用户验证系统实现
2020/12/18 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
公司前台辞职报告
2014/01/19 职场文书
导游个人求职信范文
2014/03/23 职场文书
绿色小区申报材料
2014/08/22 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书