预览地址
样例

用到的技术有swiper.js 4,
swiper实例部分

var mySwiper = new Swiper(".swiper-container",{
    slidesPerView: "auto",//显示多少块
    centeredSlides: !0,//是否居中
    watchSlidesProgress: !0,

    /*onTouchEnd: TouchEnd(mySwiper.activeIndex),*/
    /*onSlideChangeEnd:*/
     on: {
      progress: function(progress) {
      for (i = 0; i < this.slides.length; i++) {
        var slide = this.slides.eq(i);
        var slideProgress = this.slides[i].progress;
        modify = 1;
        if (Math.abs(slideProgress) > 1) {
          modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
        }
       
        scale = 1 - Math.abs(slideProgress)/6;
       zIndex = 99-Math.abs(Math.round(10 * slideProgress));
       console.log(zIndex)
        slide.css('zIndex', zIndex);
        slide.css('opacity', 1);
        slide.transform('scale(' + scale + ')');
      
        slide.css('opacity', 1);
        if (Math.abs(slideProgress) > 3) {
          slide.css('opacity', 0);
        }
      }
    },
    setTransition: function(transition) {
      for (var i = 0; i < this.slides.length; i++) {
        var slide = this.slides.eq(i)
        slide.transition(transition);
      }

    }
        }
      
});

css部分

swiper-slide {
    position: relative;
    box-sizing: border-box;
    width: 7.066667rem;
    height: 7.733333rem;
    margin: 0 0.693333rem;
   
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d; 
    background: rgb(255,255,255);
     border-radius: 0.533333rem;
     
   
    box-shadow: 0 0 0.266667rem rgba(255,255,255,0.1),
               0 0 0.266667rem  rgba(255,255,255,0.1),
               0 0 0.266667rem rgba(255,255,255,0.1),
               0 0 0.266667rem rgba(255,255,255,0.1),
               0 0 0.266667rem rgba(255,255,255,0.1),
               0 0 0.266667rem  rgba(255,255,255,0.1),
               0 0 0.266667rem rgba(255,255,255,0.1),
               0 0 0.266667rem rgba(255,255,255,0.1);

 -webkit-transform: scale(0.7) translateZ(0);
transform: scale(0.7) translateZ(0); 
webkit-font-smoothing: subpixel-antialiased;


}