thinkphp标签实现bootsrtap轮播carousel实例
由于轮播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实例的更多相关文章

  1. Bootstrap历练实例:轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

  3. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  4. Bootstrap 轮播(Carousel)插件

    轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是非常灵活的.可是图像,内嵌框架,视频或者其它您想的放置任何内容的类型. 下面是一个简单的幻灯片,使用轮播(carousel)插件显示 ...

  5. Bootstrap的js插件之轮播(carousel)

    轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...

  6. 前端基础功能,原生js实现轮播图实例教程

    轮播图是前端最基本.最常见的功能,不论web端还是移动端,大平台还是小网站,大多在首页都会放一个轮播图效果.本教程讲解怎么实现一个简单的轮播图效果.学习本教程之前,读者需要具备html和css技能,同 ...

  7. jquery 轮播图实例

    实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...

  8. BootStrap 轮播 Carousel

    参考 http://wrongwaycn.github.io/bootstrap/docs/javascript.html#collapse 同样 启动方式有2种 一种是在div的class中加  另 ...

  9. JavaScript 轮播图实例

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

随机推荐

  1. ubuntu下绝对路径和相对路径的问题

     绝对路径与相对路径 除了需要特别注意的FHS目录配置外,在文件名部分我们也要特别注意.因为根据档名写法的不同,也可将所谓的路径(path)定义为绝对路径(absolute)与相对路径(relativ ...

  2. 1.1Tensorflow训练线性回归模型入门程序

    tensorflow #-*- coding: utf-8 -*- # @Time : 2017/12/19 14:36 # @Author : Z # @Email : S # @File : 1. ...

  3. HDU 1166 - 敌兵布阵 - [单点修改、区间查询zkw线段树]

    题还是那个题:http://www.cnblogs.com/dilthey/p/6827959.html 不过我们今天换一种线段树实现来做这道题: 关于zkw线段树的讲解:https://zhuanl ...

  4. python 关于GUI的思考(转)

    作者:知乎用户链接:https://www.zhihu.com/question/19721063/answer/21311275来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  5. ORACLE 根据根节点查所有上层节点

    1.基本数据 SELECT * FROM TABLE_MUEN T ID         CODE                                           NAME     ...

  6. 洛谷P4147 玉蟾宫 单调栈/悬线法

    正解:单调栈/悬线法 解题报告: ummm这题我当初做的时候一点思路也没有只会暴力出奇迹:D(啊听说暴力好像能水过去呢,,, 然后当初是看的题解,然后学了下悬线法 然后就忘了:D 然后我现在看发现看不 ...

  7. pycharm 使用激活补丁永久激活+汉化

    提供激活补丁激活方式(推荐使用-使用期到2100年,基本永久啦) 破解补丁激活 1.下载 https://pan.baidu.com/s/1GehNMTXagUxUEted1DT-Pg 密码:6689 ...

  8. Loadrunner解决启动浏览器后页面显示空白

    Loadrunner解决启动浏览器后页面显示空白 2018年5月20日,今天照常打开Loadrunner准备学习,在录制的时候却出现了一个问题,浏览器可以启动,但是程序页面缺是加载不出来,主要症状体现 ...

  9. (c++) int 转 string,char*,const char*和string的相互转换

    一.int 和string的相互转换 1 int 转化为 string c++ //char *itoa( int value, char *string,int radix); // 原型说明: / ...

  10. XMind思维导图自定义图标/图片