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 相关文章推荐
jquery实现图片翻页效果
Dec 23 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 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
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python3爬取淘宝信息代码分析
2018/02/10 Python
Django中使用Celery的教程详解
2018/08/24 Python
python代码区分大小写吗
2020/06/17 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
微笑面对生活演讲稿
2014/09/23 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
浅析Python中的随机采样和概率分布
2021/12/06 Python
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server
python小型的音频操作库mp3Play
2022/04/24 Python
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers