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 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
JavaScript实现美化滑块效果
May 17 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加密解密函数代码
2013/06/19 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
PHP中list方法用法示例
2016/12/01 PHP
PHP实现百度人脸识别
2019/05/06 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
javascript常用的方法分享
2015/07/01 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
python读写ini文件示例(python读写文件)
2014/03/25 Python
Python使用py2exe打包程序介绍
2014/11/20 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
Python Subprocess模块原理及实例
2019/08/26 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
Python urllib2运行过程原理解析
2020/06/04 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
国际政治个人自荐信范文
2013/11/26 职场文书
英语老师推荐信
2014/02/26 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
MySQL如何使备份得数据保持一致
2022/05/02 MySQL