swipertest.css

 .swiper-container {
   width: 100%;
   background: #fff;
   padding-bottom: 10px;
   position: relative;
 }

 .swiper-navigator {
   width: 90%;
   height: 30px;
   position: absolute;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   top: 50%;
   left: 50%;
 }

 .swiper-btn-next,
 .swiper-btn-prev {
   color: #fff;
   background: rgba(0, 0, 0, .5);
   position: absolute;
   width: 30px;
   height: 30px;
   -ms-display: flex;
   display: flex;
   padding-top: 3px;
   -ms-justify-content: center;
   justify-content: center;
   cursor: pointer;
 }

 .swiper-btn-next {
   right: -40px;
 }

 .swiper-btn-prev {
   left: -40px;
 }

 .swiper-wrap {
   width: 90%;
   margin: 0 auto;
   /* 父元素开启3d，才会有叠加效果 f*/
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;
   /* 叠加过渡好看点 */
   -ms-perspective: 500px;
   perspective: 500px;
   display: flex;
   -ms-display: flex;
   justify-content: center;
   -ms-justify-content: center;
   align-items: center;
   -ms-align-items: center;
   z-index: 9;
   position: relative;
 }

 .swiper-wrap li {
   position: absolute;
   left: 0;
   height: auto;
   box-shadow: 0 0 11px rgba(0, 0, 0, 0.5);
   border-radius: 6%;
   width: auto;
   top: 0;
 }

 .swiper-wrap li:nth-child(1) {
   position: relative;
 }

 .swiper-wrap.transition li {
   transition: .5s;
 }

 .swiper-wrap img {
   width: 100%;
   display: block;
 }

 .p1 {
   z-index: 3;
   transform: translateZ(100px) scale(0.5);
   -ms-transform: translateZ(100px) scale(0.5);
   /* transform: transalteZ(10px) 数值越大越上面*/
 }

 .p2 {
   z-index: 2;
   transform: translate3d(15%, 0, 90px) scale(0.4);
   -ms-transform: translate3d(15%, 0, 90px) scale(0.4);
 }

 .swiper-3 .p3,
 .swiper-6 .p6 {
   z-index: 2;
   transform: translate3d(-15%, 0, 90px) scale(.4);
   -ms-transform: translate3d(-15%, 0, 90px) scale(.4);
 }

 .swiper-6 .p3,
 .swiper-5 .p3 {
   z-index: 1;
   transform: translate3d(26%, 0, 80px) scale(.3);
   -ms-transform: translate3d(26%, 0, 80px) scale(.3);
 }

 .swiper-6 .p4,
 .swiper-4 .p3 {
   transform: translate3d(0%, 0, 80px) scale(.3);
   -ms-transform: translate3d(0%, 0, 80px) scale(.3);
 }

 .swiper-6 .p5,
 .swiper-5 .p4 {
   z-index: 1;
   transform: translate3d(-26%, 0, 80px) scale(0.3);
   -ms-transform: translate3d(-26%, 0, 80px) scale(0.3);
 }

 .swiper-6 .p6,
 .swiper-4 .p4,
 .swiper-5 .p5 {
   z-index: 2;
   transform: translate3d(-15%, 0, 90px) scale(.4);
   -ms-transform: translate3d(-15%, 0, 90px) scale(.4);
 }

 .swiper-dots {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   bottom: 11%;
   display: flex;
   justify-content: center;
 }

 .swiper-dots li {
   width: 20px;
   height: 2px;
   background: #b5b5b5;
   margin-right: 10px;
   float: left;
   transition: .3s;
 }

 .swiper-dots li:last-child {
   margin: 0;
 }

 .swiper-dots .active {
   background: #ff4949;
 }

 @media screen and (min-width: 425px) {

   .swiper-wrap,
   .swiper-navigator {
     width: 80%;
   }
 }

 @media screen and (min-width: 1360px) {

   .swiper-wrap,
   .swiper-navigator {
     width: 1087px;
   }
 }