SOURCE

$(function() {

  // swiper 示例，没用到可以不拷贝
  var swiper = new Swiper('.banner .swiper-container', {
    pagination: {
      el: '.banner .swiper-pagination'
    },
    loop: true,
    autoplay: true
  });

  // slick 示例，没用到可以不拷贝
  $('.slick-container').slick({
    arrows: false,
    autoplay: true,
    dots: true
  });

  // swiper 层叠轮播示例，没用到可以不拷贝
  var modify = 0;
  var certifySwiper = new Swiper('.m-slide-certify .swiper-container', {
    watchSlidesProgress: true,
    slidesPerView: 'auto',
    centeredSlides: true,
    loop: true,
    loopedSlides: 5,
    autoplay: true,
    navigation: {
      nextEl: '.m-slide-certify .swiper-button-next',
      prevEl: '.m-slide-certify .swiper-button-prev',
    },
    pagination: {
      el: '.m-slide-certify .swiper-pagination'
    },
    on: {
      progress: function(progress) {
        for (i = 0; i < this.slides.length; i++) {
          var slide = this.slides.eq(i);
          var slideProgress = this.slides[i].progress;

          if (Math.abs(slideProgress) > 1) {
            modify = (Math.abs(slideProgress) - 1) * 0.4 + 1;
          }
          translate = slideProgress * modify * 100 + 'px';
          scale = 1 - Math.abs(slideProgress) / 5;
          zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
          slide.transform('translateX(' + translate + ') scale(' + scale + ')');
          slide.css('zIndex', zIndex);
          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);
        }
      }
    }
  });

});

<!-- 1. swiper 轮播演示 -->
<div class="banner">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg"
        alt="" class="pic" />
      </div>
      <div class="swiper-slide">
        <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg"
        alt="" class="pic" />
      </div>
    </div>
    <div class="swiper-pagination">
    </div>
  </div>
</div>
<!-- 2. slick 轮播演示 -->
<div class="banner">
  <div class="slick-container">
    <div class="slick-slide">
      <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg"
      alt="" class="pic" />
    </div>
    <div class="slick-slide">
      <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg"
      alt="" class="pic" />
    </div>
  </div>
</div>
<!-- 3. swiper 层叠轮播演示 -->
<div class="m-slide-certify">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg"
        alt="" />
      </div>
      <div class="swiper-slide">
        <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg"
        alt="" />
      </div>
      <div class="swiper-slide">
        <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg"
        alt="" />
      </div>
      <div class="swiper-slide">
        <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg"
        alt="" />
      </div>
      <div class="swiper-slide">
        <img src="http://pic.celong.cn/uploads/ueditor/2018-05-09/15258356144.jpg"
        alt="" />
      </div>
    </div>
    <div class="swiper-pagination">
    </div>
    <div class="swiper-button-prev">
    </div>
    <div class="swiper-button-next">
    </div>
  </div>
</div>

/* 轮播，默认按比例占位 */

.banner {
  overflow: hidden;
  position: relative;
  padding-top: 15%;
  background: #fff;
}


/* swiper，没用到可以不拷贝 */

.banner .swiper-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.banner .swiper-slide .pic {
  display: block;
  width: 100%;
}


/* slick，没用到可以不拷贝 */

.banner .slick-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.banner .slick-slide .pic {
  display: block;
  width: 100%;
}

.banner .slick-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.banner .slick-dots li {
  overflow: hidden;
  display: inline-block;
  margin: 0 4px;
  width: 8px;
  height: 8px;
  background: rgba(0, 0, 0, .2);
  -webkit-border-radius: 100% 100%;
  border-radius: 100% 100%;
}

.banner .slick-dots li.slick-active {
  background-color: #007aff;
}

.banner .slick-dots li button {
  display: none;
}


/* swiper 层叠轮播，没用到可以不拷贝 */

.m-slide-certify {
  overflow: hidden;
  position: relative;
  margin: 30px auto;
  width: 320px;
  height: 140px;
}

.m-slide-certify .swiper-container {
  padding-bottom: 40px;
}

.m-slide-certify .swiper-slide {
  padding: 2px;
  width: 180px;
  height: 100px;
  background: #fff;
  border: 1px solid #c2c2c2;
}

.m-slide-certify .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.m-slide-certify .swiper-pagination {
  width: 100%;
  bottom: 10px;
}

.m-slide-certify .swiper-pagination-bullets .swiper-pagination-bullet {
  opacity: 1;
  margin: 0 5px;
  width: 5px;
  height: 5px;
  border: 2px solid #fff;
  background-color: #d5d5d5;
}

.m-slide-certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
  border-color: #00aadc;
  background-color: #fff;
}

.m-slide-certify .swiper-button-prev,
.m-slide-certify .swiper-button-next {
  top: 55px;
  width: 20px;
  height: 40px;
  background-repeat: no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

.m-slide-certify .swiper-button-prev {
  left: 75px;
  background-image: url(http://pic.celong.cn/15235318388.png);
}

.m-slide-certify .swiper-button-prev:hover {}

.m-slide-certify .swiper-button-next {
  right: 75px;
  background-image: url(http://pic.celong.cn/152353183810.png);
}

.m-slide-certify .swiper-button-next:hover {}