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 Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
原生javascript获取元素样式
Dec 31 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
代码整洁之道(重构)
Oct 25 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 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/03/02 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
php和nginx交互实例讲解
2019/09/24 PHP
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
详解Python IO编程
2020/07/24 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
学前教育毕业生自荐信范文
2013/12/24 职场文书
全陪导游欢迎词
2014/01/17 职场文书
借款协议书
2014/04/12 职场文书
施工协议书范本
2014/04/22 职场文书
心理健康活动总结
2014/04/30 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
个人工作能力自我评价
2015/03/05 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android