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. iOS - 开源框架、项目和学习资料汇总(动画篇)

    动画 1. Core Animation笔记,基本的使用方法 – Core Animation笔记,基本的使用方法:1.基本动画,2.多步动画,3.沿路径的动画,4.时间函数,5.动画组.2. awe ...

  2. vue---结合elementui做异步数据分页

    使用vue+elementui来请求数据做分页: <el-col :span="24" class="toolbar pageBar"> <e ...

  3. Java工程师之Spring Framework深度剖析专栏

    系列前言 关于本系列 本系列章节目录 Spring Framework核心篇 重新来认识你的老朋友Spring框架 Spring容器装配Bean的三种方式 Spring Framework核心概念之B ...

  4. 双节点weblogic集群安装

    一.准备工作 1.环境信息规划 Server name Ip地址 Port 备注 AdminServer 192.168.100.175 7001 管理服务器 Ms1 192.168.100.175 ...

  5. linux:文件打包与压缩

    学习内容介绍:Linux 上常用的压缩/解压工具,介绍了zip.rar.tar的使用. 先总结一下常用命令: zip: 打包 :zip something.zip something (目录请加 -r ...

  6. [python]去掉 unicode 字符串前面的 u(转)

    add by zhj: 其实一般情况下,不会遇到变量c这种编码的,往往是哪些出错了,才会出现这种情况.所以遇到这种情况,要先 查看代码,避免这种情况的出现 原文:https://mozillazg.c ...

  7. Win10系统 Eclipse 下'Publishing to Tomcat'has encountered a problem解决办法

    首先贴出来错误: 详情为:Publishing failedCould not publish to the server.There were issues during deployment to ...

  8. Loadrunner 手动关联技术

    录制成功,回放失败,怀疑和动态数据有关: 1 重新录制一份脚本,两次录制的脚本进行比对,确定动态数据,复制动态数据: 2  找到第一次产生该动态数据的响应对应的相应请求: 1)  拷贝脚本中适当长度的 ...

  9. 【Python】【Web.py】python调用html【问题:echart图标调用html上未显示】

    code调用123.html和echarts.min.js文件 code.py import web import execjs urls = ( '/hello', 'hello', ) app = ...

  10. 非极大值抑制(NMS)

    非极大值抑制顾名思义就是抑制不是极大值的元素,搜索局部的极大值.这个局部代表的是一个邻域,邻域有两个参数可变,一个是邻域的维数,二是邻域的大小.这里不讨论通用的NMS算法,而是用于在目标检测中提取分数 ...