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与firefox下Dhtml的一些区别小结
Dec 02 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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中单引号与双引号的区别分析
2014/08/19 PHP
33道php常见面试题及答案
2015/07/06 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
js判断undefined类型示例代码
2014/02/10 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python读取网页内容的方法
2015/07/30 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
Puma印度官网:德国运动品牌
2019/10/06 全球购物
2014信息公开实施方案
2014/02/22 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
督导岗位职责范本
2015/04/10 职场文书
建国大业观后感800字
2015/06/01 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
Python实现抖音热搜定时爬取功能
2022/03/16 Python