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.onload和$(function(){})的区别介绍
Oct 30 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 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
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
js转义字符介绍
2013/11/05 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Django之路由层的实现
2019/09/09 Python
python入门之井字棋小游戏
2020/03/05 Python
什么是python类属性
2020/06/10 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
三月学雷锋活动总结
2014/06/26 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
批评与自我批评范文
2014/10/15 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript