<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><>
    <li data-target="#carousel-example-generic" data-slide-to="1"><>
    <li data-target="#carousel-example-generic" data-slide-to="2"><>
  </ol>

<!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

<!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

data-ride = "carousel" 循环 data-interval="10" 时间 

Carousel轮播图的更多相关文章

  1. Bootstrap插件-carousel(轮播图)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. iview Carousel 轮播图自适应宽高；iview 轮播图 图片重叠问题；iview tabs 高度互相影响问题；vue this问题；

    最终效果图: 一.轮播图中图片自适应宽高:  <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...

  3. 前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

  4. 6_bootstrap之导航条|轮播图|排版|表单元素|分页

    8.导航条 BootStrap已经提供了完整的导航条实例,通常情况下,我们仅需进行简单修改即可使用. 帮助手册位置:组件-------导航条 9.轮播图 BootStrap已经提供了完整的轮播图实例, ...

  5. bootstrap轮播图组件

    一.轮播图组件模板(官方文档) <div id="carousel-example-generic" class="carousel slide" dat ...

  6. 使用bootstrap建立响应式网页——通栏轮播图（carousel）

    1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...

  7. Bootstrap 轮播图（Carousel）插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  9. 一步一步拆解一个简单的iOS轮播图（三图）

    导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...

随机推荐

  1. java-数组排序--插入排序

    插入排序 想象着你的左手拿着一手好牌[1,1,1,2,6,6,6,9,9],此时你从桌面上又抽出一张牌[1],你将抽出的牌,从又往左,依次与左手的牌进行比较(只以数字进行对比),当抽出的牌第一次不再大 ...

  2. tarjin求割点

    题目: hdu3671 http://acm.hdu.edu.cn/showproblem.php?pid=3671 题意:给一个无向图,要求毁掉两个点,使图变得不连通,图一开始是连通的 因为要毁掉两 ...

  3. 第二次作业-熟悉git

    GIT地址 https://github.com/gentlemanzq/yunsuanhomework GIT用户名  gentlemanzq 学号后五位  62320 博客地址 https://w ...

  4. Alpha冲刺——代码规范、冲刺任务与计划

    代码规范 作业描述 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Alpha冲刺(团队) 团队目标 切实可行的计算机协会维修预约平台 开发工具 Eclipse 团队信息 ...

  5. Linux 下的两个特殊的文件 -- /dev/null 和 /dev/zero 简介及对比

    1.概论 -- 来自维基的解释 /dev/null  : 在类Unix系统中,/dev/null,或称空设备,是一个特殊的设备文件,它丢弃一切写入其中的数据(但报告写入操作成功),读取它则会立即得到一 ...

  6. Python算术运算

    一.算术运算1.四则运算1+(100-20)/4+5*22.乘方运算2**103.求摸运算7%5 4.取整运算  7//5 = 1 5.绝对值函数  abs(-100) 6.导入数学函数后才能执行类似 ...

  7. ef.core Mysql

    Entity层 using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; ...

  8. 19南昌网络赛L

    校赛打杂没施展开. 题意:一开始给你一颗 (0,0)到(0,l)的树. 这棵树每一年会长出来三个幼芽(雾),长度均为l/4,方向分别是左转60,右转60,和不变. 年份<=14 考虑3^14直接 ...

  9. Java基础-对象与类

    面向对象程序设计概述 面向对象的程序设计(简称OOP)时当今主流的程序设计范型,已经取代了"结构化"过程化程序设计开发技术,Java是完全面向对象的. 类 类设计构造对象的模板或蓝 ...

  10. Python-JSON和pickle

    笔记:一:简介 (1)JSON (JavaScript Object Notation) 是一种轻量级(XML重量级)的数据交换格式. 是为了数据交换而定制的一种规则,它基于ECMAScript的一个 ...