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. 9.4Django

    2018-9-4 17:19:13 昨天和基友玩到了十点 一路溜着玩喝豆腐脑,谈谈人生!感触颇深! 越努力,越幸运! 关于 Django的一开始的配置东西! 2018-9-4 19:42:27 201 ...

  2. TOP100summit 2017 七牛云许式伟:不用JAVA和C语言,我为什么坚持Go语言

    本文编辑:Cynthia 2009年,谷歌发布第二款开源编程语言,Go语言.8年过去了,很多初创公司早期使用Go进行开发,包括云计算巨头Docker.而Go语言在中国的普及程度还比不上JAVA和C语言 ...

  3. HDU 2602 - Bone Collector - [01背包模板题]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2602 Many years ago , in Teddy’s hometown there was a ...

  4. 0001python中特殊的for迭代zip函数

    >>> a = [1,2,3,4,5] >>> b = [9,8,7,6,5] >>> length = len(a) if len(a)< ...

  5. 通过 Kubernetes 和容器实现 DevOps

    https://mp.weixin.qq.com/s/1WmwisSGrVyXixgCYzMA1w 直到 Docker 的出现(2008 年),容器才真正具备了较好的可操作性和实用性.容器技术的概念最 ...

  6. pyqt5核心-信号与槽(第二弹)

    果: from PyQt5 import QtCore, QtGui, QtWidgets class Ui_Form(object): def setupUi(self, Form): Form.s ...

  7. less语言特性(一) —— 变量

    近两年移动市场不断扩大,HTML5也逐渐升温,为了使我们前端工作更有效率,各种框架层出不穷,本章将介绍LESSCSS框架.LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS ...

  8. UIStoryboard跳转界面

    /**1.创建Storyboard,加载Storyboard的名字,这里是自己创建的Storyboard的名字*/ UIStoryboard *storyboard = [UIStoryboard s ...

  9. Ubuntu 下Apache安装和配置

    在Ubuntu上安装Apache,有两种方式:1 使用开发包的打包服务,例如使用apt-get命令:2 从源码构建Apache.本文章将详细描述这两种不同的安装方式. 方法一:使用开发包的打包服务—— ...

  10. Spark性能优化(一)

    前言 在大数据计算领域,Spark已经成为了越来越流行.越来越受欢迎的计算平台之一.Spark的功能涵盖了大数据领域的离线批处理.SQL类处理.流式/实时计算.机器学习.图计算等各种不同类型的计算操作 ...