swiper.js-全屏效果实现

bi3643 9年前

来自： http://my.oschina.net/u/2352644/blog/614984

针对swiper.js的全屏动画切换，我们已经简单分析和介绍过一次：

http://my.oschina.net/u/2352644/blog/487902 这个里面非常简单的分析了如何加入我们的动画效果，swiper现在已经出现了3.0版本，我们这里就是使用swiper3.0去开发我们的更贴近真实的项目。

下载swiper3.0 http://www.swiper.com.cn/download/index.html 推荐下载演示包，这样我们可以充分了解swiper都可以实现什么！

一，原理简单分析

1.加入动画

上一个博客只是分析了在active类名下加入我们的动画样式就可完成我们的效果呈现，这里我们二次的分析其中的更多知识，了解别人的原理我们在构建类似效果就可以自己动手了。

首先打开demo文件下，预览这个html页面，和复制此html页面：

然后打开dist文件夹，把这个html重新命名自己喜欢的名称，我的是demo2

demo2.html就是我们的实战页面，我们打开页面，把css和js的引入路径从全局改为dist下的css和js上：

<!DOCTYPE html>  <html>  <head>      <meta charset="utf-8">      <title>demo2</title>      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">      <!-- Link Swiper's CSS -->      <link rel="stylesheet" href="css/swiper.min.css">      <!-- Demo styles -->      <style>      html, body {          position: relative;          height: 100%;      }      body {          background: #eee;          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;          font-size: 14px;          color:#000;          margin: 0;          padding: 0;      }      .swiper-container {          width: 100%;          height: 100%;      }      .swiper-slide {          text-align: center;          font-size: 18px;          background: #fff;          /* Center slide text vertically */          display: -webkit-box;          display: -ms-flexbox;          display: -webkit-flex;          display: flex;          -webkit-box-pack: center;          -ms-flex-pack: center;          -webkit-justify-content: center;          justify-content: center;          -webkit-box-align: center;          -ms-flex-align: center;          -webkit-align-items: center;          align-items: center;      }      </style>  </head>  <body>      <!-- Swiper -->      <div>          <div id="aa">              <div>Slide 1</div>              <div>Slide 2</div>              <div>Slide 3</div>              <div>Slide 4</div>              <div>Slide 5</div>              <div>Slide 6</div>              <div>Slide 7</div>              <div>Slide 8</div>              <div>Slide 9</div>              <div>Slide 10</div>          </div>          <!-- Add Pagination -->          <div></div>      </div>      <!-- Swiper JS -->      <script src="js/swiper.min.js"></script>      <!-- Initialize Swiper -->      <script>      var swiper = new Swiper('.swiper-container', {          pagination: '.swiper-pagination',          paginationClickable: true,          direction: 'vertical'      });            </script>  </body>  </html>

我们预览测试，pc就可以查看，保证没有任何问题，我们firebug查看是不是当前所在位置有active的类名：