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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
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中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Python 创建守护进程的示例
2020/09/29 Python
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
比利时买床:Beter Bed
2017/12/06 全球购物
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
教师演讲稿范文
2014/01/08 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
督导岗位职责
2015/02/04 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
党支部培养考察意见
2015/06/02 职场文书
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang