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学习之闭包分析
Dec 02 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
javascript常见操作汇总
Sep 03 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
微信小程序学习之自定义滚动弹窗
Dec 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
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python做简单的字符串匹配详解
2017/03/21 Python
Flask-Mail用法实例分析
2018/07/21 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
python机器学习实现决策树
2019/11/11 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
物理专业本科生自荐信
2014/01/30 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
2014年共青团工作总结
2014/12/10 职场文书
法人身份证明书
2015/06/18 职场文书