Vue3 Element Plus 轮播图组件 - 宽度百分百,高度600px 代码示例
<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>
原文地址: https://www.cveoy.top/t/topic/mB9R 著作权归作者所有。请勿转载和采集!