<template>
  <div class="slideshow">
      <el-carousel :interval="3000" arrow="always" type="card">
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <img
            :src="item.image"
            :alt="item.description"
            style="width: 100%; height: auto"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
</template>

<script>
export default {
  data () {
    return {
      carouselItems: [
        {
          image: require('@/assets/images/1.jpg')
        },
        {
          image: require('@/assets/images/2.jpg')
        },
        {
          image: require('@/assets/images/3.jpg')
        },
        {
          image: require('@/assets/images/4.jpg')
        }
      ]
    }
  }
}
</script>

<style>
.slideshow {
  width: 1800px;
  margin: auto;
  margin-top: 10px;
}
</style>
