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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
vue下载excel的实现代码后台用post方法
May 10 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数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
javascript forEach通用循环遍历方法
2010/10/11 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
Python脚本实现网卡流量监控
2015/02/14 Python
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
新媒传信软件测试面试题
2013/02/24 面试题
医学专业应届生的自我评价
2014/02/28 职场文书
小学班级特色活动方案
2014/08/31 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
百年孤独读书笔记
2015/06/29 职场文书
个人向公司借款协议书
2016/03/19 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python
你真的会用Mysql的explain吗
2022/03/31 MySQL