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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
详解ES6中的let命令
Apr 05 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
Javascript异步编程async实现过程详解
Apr 02 Javascript
vue3不同环境下实现配置代理
May 25 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动态创建Web站点的方法
2011/08/14 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
Python机器学习之决策树算法
2017/12/22 Python
Python爬豆瓣电影实例
2018/02/23 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
python实现自主查询实时天气
2018/06/22 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Python实现数字的格式化输出
2020/08/01 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
企业出纳岗位职责
2014/03/12 职场文书
销售口号大全
2014/06/11 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
go原生库的中bytes.Buffer用法
2021/04/25 Golang