45 lines
866 B
Vue
45 lines
866 B
Vue
<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>
|