swiper.js实现3D界面滑动效果

官网地址：swiper中文网

swiper的使用很简单，需要引入两个文件，

<link href="css/swiper.min.css" rel="stylesheet">

<script src="js/swiper.min.js"></script>

<div class="container">
  <div class="swiper-container swiper">
     <div class="swiper-wrapper">
        <div class="swiper-slide">
           <a href="#">
              <img src="A.jpg" alt="">
           </a>
        </div>
     <div class="swiper-slide">
        <a href="#">
           <img src="B.jpg" alt="">
        </a>
     </div>
     <div class="swiper-slide">
        <a href="#">
           <img src="C.jpg" alt="">
         </a>
     </div>
    </div>
  </div>  
</div>

        .container {
            /*width: 100%;*/
            border: 1px solid #ccc;
        }
        .swiper {
            width: 100%;
            height: 150px;
        }
        .swiper .swiper-slide:nth-child(n) {
            color: #ec5566;
            border-bottom: 2px solid #ec5566;
        }
        .swiper .swiper-slide:nth-child(2n) {
            color: #5e9fd5;
            border-bottom: 2px solid #5e9fd5;
        }
        .swiper .swiper-slide:nth-child(3n) {
            color: #3b9c8a;
            border-bottom: 2px solid #3a9b89;
        }
        .swiper .swiper-slide {
            text-align: center;
            font-size: 16px;
            height: 150px;
            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;
            cursor: pointer;
        }
        .swiper .swiper-slide img{
            height: 110px;
        }

<script>
    $(function() {
        var swiper = new Swiper('.swiper', {
//                  设置slider容器能够同时显示的slides数量(carousel模式)。
//                  可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
//                  loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
            slidesPerView: 5.5,
            paginationClickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
            spaceBetween: 10,//slide之间的距离（单位px）。
            freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
            loop: true,//是否可循环
            effect : 'coverflow',  //3D界面效果
            slidesPerView: 3,  
            centeredSlides: true, 

        });
    });
</script>

cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数，可选值：

rotate：slide做3d旋转时Y轴的旋转角度。默认50。

stretch：每个slide之间的拉伸值，越大slide靠得越紧。 默认0。

depth：slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。

modifier：depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。

slideShadows：开启slide阴影。默认 true。