<template>
  <el-carousel :interval="5000" arrow="always" :height=height>
    <el-carousel-item v-for="item in banner" :key="item.id">
      <a :href="item.link" target="_blank">
        <div class="banner" :style="{backgroundImage: `url(${item.image}`}"></div>
        <!-- <img :src="item.image" :alt="item.title"/> -->
      </a>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
props:{
  banner:[],
  height:String,
}
};
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
</style>