数据可视化大屏开发中，需要一个卡片轮播的效果，这里选用的是element plus的走马灯，默认的走马灯选中的卡片长度只有50%和设计图的长度还是有差距的，需要调整一下。

实现代码

当我们单独设置了卡片长度后，卡片会出现偏移，这时候我们需要调整一下，让其向左移动一定的距离保证能够在中间显示。

<template>
  <div class="cardBody" ref="cardBodyRef">
    <el-carousel class="cardBodyInner" :autoplay="false" indicator-position="none" :interval="4000" type="card"
                 :height="cardBodyHeight + 'px'">
      <el-carousel-item v-for="item in list" :key="item">
        <div class="cardInfo" :style="{ backgroundImage: 'url(' + item.img + ')' }">
          <img src="./assets/iconPlay.png" alt="">
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import img1 from './assets/bgImg.png'
import img2 from './assets/bgImg2.png'
import img3 from './assets/bgImg3.png'

export default {
  name: "title",
  data() {
    return {
      list: [{
        img: img1,
      }, {
        img: img2,
      }, {
        img: img3,
      }, {
        img: img1,
      }, {
        img: img2,
      }, {
        img: img3,
      },],
      cardBodyHeight: 0 // Default height
    }
  },
  components: {},
  mounted() {
    this.cardBodyHeight = this.$refs.cardBodyRef.clientHeight - 10;
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.cardBody {
  width: 100%;
  position: relative;
  height: 100%;

  .cardInfo {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    img {
      width: 57px;
    }
  }
}

.el-carousel__item--card {
  width: 70%;
  margin-left: -10%;
}

.cardBodyInner {
  margin-top: 5px;
}

</style>