Boostrap轮播图学习

bootstrap轮播图

结构

|——div整个轮播图组件的整体
|————Indicators指示器,是图片轮播的控制点
|————.carousel-inner是所有轮播项的容器盒子
|————Controls控制部分,轮播图的两个按钮

整体

    1、轮播图需要声明一个id，需要加上 class="carousel" 样式
    2、加上样式slide为我们的轮播图增加滑动的效果
    3、data-ride：让我们的轮播图在页面初始化之后就开始播放，就是不能和轮播图js初始化同时存在。

指示器

• ol列表设置样式carousel-indicators
• 设置active代表当前激活的指示器
• li配置参数
• data-target:控制的是那个轮播图
• data-slide-to:这个指示器对应的是哪一张图，从0开始

轮播图图片容器

• 放在样式为.carousel-inner的div下。
• 下面每个item对应每个轮播图。
• 设置个active代表当前激活轮播图
• 在carousel-caption容器下设置标题

控制部分

a标签

• 左侧样式设置为设置为left carousel-control
• 右侧样式设置为right carousel-control
• href指定控制的是哪个轮播图
• data-slide 指定的是向前还是向后
• a标签内包含图标

左侧 
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
右侧 
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

js初始化参数

• interval: 10000, 多久播放一次
• pause: ‘null’, 是否鼠标悬停暂停
• wrap: true, 是否循环播放
• keyboard: false,是否监听键盘事件

提供的方法

• .carousel(‘cycle’) 开始循环播放
• .carousel(‘pause’) 暂停播放
• .carousel(number) 跳转到指定轮播图
• .carousel(‘prev’) 上一个轮播图
• .carousel(‘next’) 下一个轮播图

事件

• slide.bs.carousel 轮播图即将切换的时候执行
• slid.bs.carousel 轮播图切换之后执行
  完整演示代码

轮播图的响应式

使用img产生的图片缩放问题

在较小屏幕下显示超宽图片的方法

换用背景图的方式，background-position: center center;

使img元素绝对定位，left:50%，margin-left: -width/2 background-size引入