Vue项目中使用elementUI中的Carousel 走马灯实

轮播图效果

如需封装可参考如下：

封装Carousel走马灯实现轮播图效果

组件内容

说明：

图片放在assets目录下
Carousels.vue

<template>
  <!-- 轮播 -->
  <el-carousel  :height="bannerH+'px'"  trigger="click" arrow="always">
    <el-carousel-item class="image" v-for="item in images" :key="item.id">
       <img :src="item.url" width="100%" height="100%" alt="无图片" />
    </el-carousel-item>
  </el-carousel>

</template>

<script>
  export default {
    name: "Carousel",
    data() {
      return {
        bannerH :450,
        images: [
          { id:1, url: require("@/assets/ad1.jpg")},
          {id:2, url: require("@/assets/ad2.jpg")},
          {id:3, url: require("@/assets/ad3.jpg")},
          {id:4, url: require("@/assets/ad4.jpg")},
          {id:5, url: require("@/assets/ad5.jpg")}

        ],
      };
    },
    mounted() {
      window.addEventListener('resize', () => {
        this.setBannerH()
      }, false);
    },
    methods:{
      //设置走马灯高度
      setBannerH() {
          this.bannerH = document.body.clientWidth / 4
      },
    }
  };
</script>

<style scoped>
  .el-carousel{
    overflow-x:hidden;
    overflow-y: hidden;
  }

   .image{
    height: 550px;
    }

</style>

Carousel 的属性