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. linux安装环境

    我用的是Linux ubuntu 3.19.0-25-generic #26~14.04.1-Ubuntu SMP Fri Jul 24 21:16:20 UTC 2015 x86_64 x86_64 ...

  2. RabbitMQ服务端配置详解(转自:http://www.cnblogs.com/zhen-rh/p/6884297.html)

    RabbitMQ支持三种配置方式: 1) 读取环境变量中配置, 这包括shell中环境变量和rabbitmq-env.conf/rabbitmq-env-conf.bat文件中配置的环境变量 可配置如 ...

  3. python中filter(),map()和reduce()的用法及区别

    先看filter()方法 print(list(filter(lambda n : n % 2 == 1, range(20))))# 结果 [1, 3, 5, 7, 9, 11, 13, 15, 1 ...

  4. 2018C语言第三次作业

    要求一 2.struct sk{int a; char *str)}*p;   p->str++ 中的++ 加向? ++加向srt的地址. 要求二 题目1-计算平均成绩 1.设计思路 (1)主要 ...

  5. 数据恢复:AMDU数据抽取恢复

    今天我们通过一则真实的案例来认识oracle 自带工具AMDU,无需将磁盘组mount即可实现数据分析,轻松进行数据恢复.某日,我们收到了一则香港用户ASM破坏案例,请求数据恢复.灾难描述:这则案例是 ...

  6. Oracle体系结构之密码文件管理

    oracle密码文件主要用来控制sysdba和sysoper用户用于远程登录.通常,oracle用户登录database有两种方式,一种是通过本地操作系统验证登录,一种是通过密码文件验证登录. 操作系 ...

  7. 21.5.3 Updatable and Insertable Views

    http://dev.mysql.com/doc/refman/5.7/en/view-updatability.html Some views are updatable and reference ...

  8. Jquery获取元素的位置

    $(".curr_play").position().left //元素距离父级元素左侧位置 $(".curr_play").offset().left //元 ...

  9. 洛谷P4344 脑洞治疗仪 [SHOI2015] 线段树+二分答案/分块

    !!!一道巨恶心的数据结构题,做完当场爆炸:) 首先,如果你用位运算的时候不小心<<打成>>了,你就可以像我一样陷入疯狂的死循环改半个小时 然后,如果你改出来之后忘记把陷入死循 ...

  10. seajs引入jquery为什么无效?

    简单来说,你的jquery没有模块化? 答案:传送门1.传送门2