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

官网地址：swiper中文网

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

        .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;
        }

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。