非常酷炫的Bootstrap图片轮播动画

对于网站开发者来说，对展示内容增加一个滑动或者是轮播效果的是非常常见的需求。收费和免费的轮播插件多的是不胜枚举。其中很多提供很多有用的配置选项和动态效果。

很多时候，如果你的项目需要的是一个轻量级的轮播，不需要很多的功能。同时你的项目是采用Bootstrap，（一个最流行的开源前端框架）的话。你可以参考一下bootstrap官方组件。

这篇文章将展示如何在Bootstrap轮播上添加有趣的动画效果。同时确保这个js组件自由扩展和快速上手。

介绍Animate.css

为了让我自己写的动画效果值得称赞，我用一个非常有名的开源的CSS3动画库，被形象的称为animate.css。Dan Eden写的。

这是让我能专注于手头的任务，而不是解释CSS3动画的代码。

用Animate.css 需要2个步骤：

1、在html文档中引入animate.min.css。

2、在网页中要加动画的元素上添加animated yourchosenanimation类。

接下来你用Animate.css网站上的看到的关于动画的类名，代替yourchosenanimation。

引入Bootstrap轮播组件

Bootstrap轮播组件有三个主要的部分。

---轮播指示显示幻灯的页面数量，给用户提供一个视觉线索，并提供可以滑动的导航。

---轮播条目，一个叫.carousel-inner的类，包含在外边框的里边。代表每一个独立的滑块。每个图片里边的都可以放置图片。也可以添加标题。还可以在html元素上添加carousel-caption类名。Bootstrap会有自带的样式。我们可以通过这些元素添加动画。

---最后，是轮播控制箭头，功能是可以使用户前后滑动。

为了简单的展示demo，就先不加图片了。焦点先放在轮播框架上作为动画。

构建HTML结构

下边是你需要引用到你项目当中的：

jQuery

Bootstrap's CSS and JavaScript

Animate.css

一个样式表和js文档。

为了加快开发进程，从Bootstrap官网引用了模板和必要的文件。

下边是Bootstrap轮播代码：

<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>

 <li data-target="#carousel-example-generic" data-slide-to="1"></li>

 <li data-target="#carousel-example-generic" data-slide-to="2"></li>

 </ol>

 <!-- Wrapper for slides -->

 <div class="carousel-inner" role="listbox">

 <!-- First slide -->

 <div class="item active">

 <div class="carousel-caption">

 <h3 data-animation="animated bounceInLeft">

  This is the caption for slide 1

 </h3>

 <h3 data-animation="animated bounceInRight">

  This is the caption for slide 1

 </h3>

 <button class="btn btn-primary btn-lg"

  data-animation="animated zoomInUp">Button</button>

 </div>

 </div><!-- /.item -->

 <!-- Second slide -->

 <div class="item">

 <div class="carousel-caption">

 <h3 class="icon-container" data-animation="animated bounceInDown">

  <span class="glyphicon glyphicon-heart"></span>

 </h3>

 <h3 data-animation="animated bounceInUp">

  This is the caption for slide 2

 </h3>

 <button class="btn btn-primary btn-lg"

  data-animation="animated zoomInRight">Button</button>

 </div>

 </div><!-- /.item -->

 <!-- Third slide -->

 <div class="item">

 <div class="carousel-caption">

 <h3 class="icon-container" data-animation="animated zoomInLeft">

  <span class="glyphicon glyphicon-glass"></span>

 </h3>

 <h3 data-animation="animated flipInX">

  This is the caption for slide 3

 </h3>

 <button class="btn btn-primary btn-lg"

  data-animation="animated lightSpeedIn">Button</button>

 </div>

 </div><!-- /.item -->

 </div><!-- /.carousel-inner -->

 <!-- 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>