<template>
  <div class='carousel'>
    <el-carousel :interval='interval' :height='height'>
      <el-carousel-item v-for='(item, index) in list' :key='index'>
        <img :src='item' class='carousel-img' />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup>
import { ref } from 'vue';

const list = ref([
  'https://picsum.photos/id/237/800/600',
  'https://picsum.photos/id/238/800/600',
  'https://picsum.photos/id/239/800/600',
]);

const interval = ref(3000);
const height = ref('600px');
</script>
<style scoped>
.carousel {
  width: 100%;
}

.carousel-img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}
</style>
Vue3 Element Plus 轮播图组件 - 宽度百分百,高度600px 代码示例

原文地址: https://www.cveoy.top/t/topic/mB9R 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录