vue轮播图

vue轮播图

一、通过插件实现轮播

<template>
  <div class="content_homePage">
    <div class="banner_image">
      <el-carousel :interval="5000" arrow="always" indicator-position="outside" :height="bannerHeight + 'px'">
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <img ref="bannerHeight" class="carousel-image" :src="item.imageUrl" @load="imgLoad">
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>

import img1 from '@/assets/front/su7-1.jpg';
import img2 from '@/assets/front/su7Ultra-1.jpg';
import img3 from '@/assets/front/su7Ultra-2.jpg';

export default {
  name: "HomePage",
  components: {

  },

  data() {
    return {
      bannerHeight: '',
      carouselItems: [
        { imageUrl: img1 },
        { imageUrl: img2 },
        { imageUrl: img3 }
      ]
    };
  },

  mounted() {
    this.imgLoad();
    window.addEventListener('resize', () => {
      this.bannerHeight = this.$refs.bannerHeight[0].height
    })
  },

  methods: {
    imgLoad() {
      this.$nextTick(() => {
        this.bannerHeight=this.$refs.bannerHeight[0].height
      })
    }
  }

};
</script>

<style lang="scss">
.content_homePage {
  .banner_image {
    .el-carousel--horizontal {
      width: 100%;

      .carousel-image {
        width: 100%;
      }
    }
  }
}
</style>