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 Array Flatten 与递归使用介绍
Oct 30 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 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 缓冲的免费实现方法
2006/10/09 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
JS中数组重排序方法
2016/11/11 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
javascript实现留言板功能
2020/02/08 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Python实现识别手写数字大纲
2018/01/29 Python
python 常用的基础函数
2018/07/10 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python实现维吉尼亚加密法
2019/03/20 Python
详解python之heapq模块及排序操作
2019/04/04 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
给酒店员工的表扬信
2014/01/11 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
会计工作能力自我评价
2015/03/05 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
vue 实现上传组件
2021/05/31 Vue.js
Golang gRPC HTTP协议转换示例
2022/06/16 Golang