swiper轮播图3d效果coverflow模式实现两端缩小中间放大，swiper插件实现中间大两边小的轮播图效果

css

<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    overflow: hidden;
  }

  .swiper-container {
    margin-top: 20px;
    width: 100%;
    height: 550px;
    margin-bottom: 53px;
    overflow: visible !important;
  }

  .swiper-container .swiper-wrapper .swiper-slide {
    width: 1200px;
    border-radius: 2px;
    /* overflow: hidden; */
    height: 480px;
  }

  .swiper-container .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: 100%;
    border-radius: 2px;

  }

   .swiper-slide.swiper-slide-active:before {
    opacity: 0;
   }
   .swiper-container .swiper-pagination {
    bottom:60px;
  }

  .swiper-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: rgba(0,0,0,0.6);
  }

  .swiper-pagination .swiper-pagination-bullet-active {
    background: #fff;
  }
</style>

html

  <div class="swiper-container">
    <div class="swiper-wr