前言：

      element中功能是挺多的额，包括了支持一页显示多个，中间的立体显示效果

实现效果：

实现步骤：

1.基于element的走马灯进行二次封装的swiper.vue

<template>
  <el-carousel
    class="swiperUl"
    :type="swiperType"
    :height="swiperHeight"
    :initial-index="initialIndex"
    :trigger="trigger"
    :autoplay="autoplay"
    :interval="interval"
    :indicator-position="indicatorPosition"
    :arrow="arrow"
    :loop="loop"
    :direction="direction"
    @change="change"
  >
    <el-carousel-item class="swiperli" v-for="(item,index) in swiperUrl" :key="'swiper'+index">
      <img :src="item.url" />
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  props: {
    /**
     * 轮播类型
     * card/--
     * */
    swiperType: {
      type: String,
      default: 'card'
    },
    /**
     * 轮播高度
     * */
    swiperHeight: {
      type: String,
      default: '432px'
    },
    /**
     * 初始状态激活的幻灯片的索引，从 0 开始
     * */
    initialIndex: {
      type: Number,
      default: 0
    },
    /**
     * 指示器的触发方式
     * click/--
     * */
    trigger: {
      type: String,
      default: ''
    },
    /**
     * 是否循环显示
     * true/false
     * */
    loop: {
      type: Boolean,
      default: true
    },
    /**
     * 是否自动切换
     * true/false
     * */
    autoplay: {
      type: Boolean,
      default: false
    },
    /**
     * 自动切换的时间间隔，单位为毫秒
     * */
    interval: {
      type: Number,
      default: 4000
    },
    /**
     * 指示器的位置
     * outside/none
     * */
    indicatorPosition: {
      type: String,
      default: ''
    },
    /**
     * 切换箭头的显示时机
     * always/hover/never
     * */
    arrow: {
      type: String,
      default: 'hover'
    },
    /**
     * 走马灯展示的方向
     * horizontal/vertical
     * */
    direction: {
      type: String,
      default: 'horizontal'
    },
    /**
     * 轮播数据
     * */
    swiperUrl: {
      type: Array,
      default: () => {
        return [
          {
            url: '//d303.paixin.com/thumbs/3548553/231637502/staff_1024.jpg?imageView2/2/format/webp'
          }, {
            url: '//d303.paixin.com/thumbs/3548553/231637502/staff_1024.jpg?imageView2/2/format/webp'
          }, {
            url: '//d303.paixin.com/thumbs/3548553/231637502/staff_1024.jpg?imageView2/2/format/webp'
          }
        ]
      }
    }


  },
  watch: {},
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    /**
     * 每次切换的事件
     * */
    change(index, oldIndex) {
      let str = {
        nowIndex: index,
        oldIndex: oldIndex
      }
      this.$emit('swiperChange', str)
    }
  },
  components: {},
  beforeDestroy() {
  }

}
</script>

<style lang='scss' scoped>
  .swiperUl{
    .swiperli{
      img{
        @include wh(100%,100%);
      }
    }
    .is-active{
      transform: translateX(230px) scale(1)!important;
      width: 1080px;
    }
  }


  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

2.调用这个组件

<swiper></swiper>


import swiper from './conponents/swiper.vue'

components: {
    swiper
  },