thinkphp标签实现bootsrtap轮播carousel实例
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实例的更多相关文章
- Bootstrap历练实例:轮播(carousel)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap 历练实例-轮播(carousel)插件的事件
事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...
- Bootstrap 历练实例-轮播(carousel)插件方法
方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...
- Bootstrap 轮播(Carousel)插件
轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是非常灵活的.可是图像,内嵌框架,视频或者其它您想的放置任何内容的类型. 下面是一个简单的幻灯片,使用轮播(carousel)插件显示 ...
- Bootstrap的js插件之轮播(carousel)
轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...
- 前端基础功能,原生js实现轮播图实例教程
轮播图是前端最基本.最常见的功能,不论web端还是移动端,大平台还是小网站,大多在首页都会放一个轮播图效果.本教程讲解怎么实现一个简单的轮播图效果.学习本教程之前,读者需要具备html和css技能,同 ...
- jquery 轮播图实例
实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...
- BootStrap 轮播 Carousel
参考 http://wrongwaycn.github.io/bootstrap/docs/javascript.html#collapse 同样 启动方式有2种 一种是在div的class中加 另 ...
- JavaScript 轮播图实例
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
随机推荐
- numpy中的reshape中参数为-1
上篇文章中的reshape(-1,2),有的时候不明白为什么会有参数-1,可以通过查找文档中的reshape()去理解这个问题 根据Numpy文档(https://docs.scipy.org/doc ...
- linux 系统信息查看
查看系统版本:lsb_release -a 查看内核版本:uname -a 查看cpu型号:cat /proc/cpuinfo 查看硬盘空间情况df -lm 查看内存:free -m VGA显卡:l ...
- MySql数据库查询表信息/列信息(列ID/列名/数据类型/长度/精度/是否可以为null/默认值/是否自增/是否是主键/列描述)
查询表信息(表名/表描述): SELECT table_name name,TABLE_COMMENT value FROM INFORMATION_SCHEMA.TABLES WHERE table ...
- Mongodb之使用rpm包安装配置启动
下载rpm包 wget https://mirrors.aliyun.com/mongodb/yum/redhat/7Server/mongodb-org/3.2/x86_64/RPMS/mongod ...
- BAT等大厂已开源的70个实用工具盘点(附下载地址)
前面的一篇文章<微软.谷歌.亚马逊.Facebook等硅谷大厂91个开源软件盘点(附下载地址)>列举了国外8个互联网公司(包括微软.Google.亚马逊.IBM.Facebook.Twit ...
- PyCharm+Eclipse共用Anaconda的数据科学环境
1.安装anaconda2 安装好之后,本地python环境就采用anaconda自带的python2.7的环境. 2.安装py4j 在本地ctrl+r打开控制台后,直接使用pip安装py4j,因为a ...
- TensorFlow 实现分类操作的函数学习
函数:tf.nn.sigmoid_cross_entropy_with_logits(logits, targets, name=None) 说明:此函数是计算logits经过sigmod函数后的交叉 ...
- Linux:32/64位程序(应用程序、共享库、内核模块)
摘要: Linux系统区分32/64位,相应地,应用程序.共享库和内核模块也区分32/64位. 本文以Ubuntu系统为例,介绍如何编译和使用32/64位的应用程序.共享库和内核模块. 1. 应用程序 ...
- h5地理位置API
h5地理位置API 地理API允许javascript程序向浏览器询问用户的真实地理位置,支持地理位置API的浏览器在访问前总是会询问用户是否允许. 获取用户地理的途径有: 1.ip地 ...
- model方法取值总结
转自:https://www.cnblogs.com/ajianbeyourself/p/3604332.html