<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. RabbitMQ中交换机的消息分发机制

    RabbitMQ是一个消息代理,它接受和转发消息,是一个由 Erlang 语言开发的遵循AMQP协议的开源实现.在RabbitMQ中生产者不会将消息直接发送到队列当中,而是将消息直接发送到交换机(ex ...

  2. 20175305张天钰Java结对编程四则运算（二）

    Java结对编程四则运算(二) 一.题目描述及要求 Git提交粒度不要太粗,建议一个文件/一个类/一个函数/一个功能/一个bug修复都进行提交,不能一天提交一次,更不能一周一次,参考Commit Me ...

  3. Falsy Bouncer 过滤数组假值

    过滤数组假值 (真假美猴王) 删除数组中的所有假值. 在JavaScript中,假值有false.null.0."".undefined 和NaN. function bounce ...

  4. linux 存在多个版本的情况下，切换python版本

    linux 存在多个版本的情况下 python 命令默认寻找 /usr/bin下的命令 所以先find / -name python* 找一下所有的Python版本 然后 sudo ln /usr/b ...

  5. tf.contrib.slim add_arg_scope

    上一篇文章中我们介绍了arg_scope函数,它在每一层嵌套中update当前字典中参数形成新的字典,并入栈.那么这些参数是怎么作用到代码块中的函数的呢?比如说如下情况: with slim.arg_ ...

  6. 基于vue-cli配置移动端自适应

    移动端自适应:手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装: 1 npm i lib-flexible --save 引 ...

  7. hadoop源码分析(2)：Map-Reduce的过程解析

    一.客户端 Map-Reduce的过程首先是由客户端提交一个任务开始的. 提交任务主要是通过JobClient.runJob(JobConf)静态函数实现的: public static Runnin ...

  8. HttpClient 调用WebAPI时，传参的三种方式

    public void Post() { //方法一,传json参数 var d = new { username = " ", password = " ", ...

  9. CAS实现单点登录SSO执行原理及部署

    一.不落俗套的开始 1.背景介绍 单点登录:Single Sign On,简称SSO,SSO使得在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. CAS框架:CAS(Centra ...

  10. [Swift]LeetCode42. 接雨水 | Trapping Rain Water

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...