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. Git 使用篇二:小组协作开发

    上一片搭建了git远程服务器,那么小组成员在使用git开发的时候都有什么要注意的. 第一步: 首先每个小组成员,在自己本地建立一个目录,作为工作空间,再去git clone 这个远程仓库: git c ...

  2. 字符串匹配 扩展KMP BM&Sunday

    复杂度都是O(n) 扩展1:BM算法 KMP的匹配是从模式串的开头开始匹配的,而1977年,德克萨斯大学的Robert S. Boyer教授和J Strother Moore教授发明了一种新的字符串匹 ...

  3. pyAudio介绍

    概要 pyaudio有这么几个功能: - 提取特征 - 训练并且使用分类器 - 语音分割功能 - 内容关系可视化 python实现,好处有这么几个 - 适合做计算分析类型操作(编码少,效率不低) - ...

  4. 【紫书】Undraw the Trees UVA - 10562 递归,字符串

    题意:给你画了一颗树,你要把它的前序输出. 题解:读进到二维数组.边解析边输出. 坑:少打了个-1. #define _CRT_SECURE_NO_WARNINGS #include<cstri ...

  5. Metasploit services

    漏洞挖掘/漏洞分析-- Cve.mitre.org www.corelan.be----geek of pentesters http://wrox.cn/article/100048133/    ...

  6. AppFog使用

    cd ‘你的应用目录’ af login(之后输入你的邮箱和密码) af update ‘你的应用名’ 相关文档:https://docs.appfog.com/getting-started/af- ...

  7. 深入了解oracle存储过程的优缺点

    定义: 存储过程(Stored Procedure )是一组为了完成特定功能的SQL 语句集,经编译后存储在数据库中.用户通过指定存储过程的名字并给出参数(如果该存储过程带有参数)来执行它.存储过程是 ...

  8. python len() 函数

    Python len() Python len() 方法返回对象(字符.列表.元组等)长度或项目个数. len(obj) 方法语法 obj -- 对象(字符串.列表.元组.字典等) 字符串长度 > ...

  9. MyEclipse10.0 注册破解步骤

    MyEclipse 10.0破解 激活(java编写,适用于装有java环境的各种操作系统,Windows,Linux,MacOS) =====[方法一]=====[第一步]:输入任意用户名[第二步] ...

  10. C#静态类,静态构造函数,静态变量

    静态变量位于栈上,它是一个全局变量,在编译期就已经生成. public class Cow public static int count; private int id; { id = ++coun ...