原因是 ElementUI 没有下面这种模式.
效果如下, 细节可以自己完善
<template>
<div class="carousel-container">
<div class="carousel-wrapper">
<div class="carousel-slide" v-for="(image, index) in displayedImages" :key="index">
<img :src="image" />
</div>
</div>
<div class="carousel-arrow carousel-arrow-left" v-if="currentIndex > 0" @click="prev">←</div>
<div class="carousel-arrow carousel-arrow-right" v-if="currentIndex < images.length - 3" @click="next">→</div>
</div>
</template>
<script>
export default {
data() {
return {
images: [
"https://via.placeholder.com/300x200/ff0000/ffffff",
"https://via.placeholder.com/300x200/00ff00/ffffff",
"https://via.placeholder.com/300x200/0000ff/ffffff",
"https://via.placeholder.com/300x200/ffff00/000000",
"https://via.placeholder.com/300x200/ff00ff/ffffff",
],
currentIndex: 0,
};
},
methods: {
prev() {
this.currentIndex--;
},
next() {
this.currentIndex++;
},
},
computed: {
displayedImages() {
return this.images.slice(this.currentIndex, this.currentIndex + 3);
},
},
};
</script>
<style>
.carousel-container {
position: relative;
width: 900px;
height: 200px;
overflow: hidden;
margin: 0 auto;
}
.carousel-wrapper {
display: flex;
transition: transform 0.5s ease;
}
.carousel-slide {
width: 300px;
height: 200px;
margin-right: 20px;
}
.carousel-slide:last-child {
margin-right: 0;
}
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 40px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.carousel-arrow-left {
left: 0;
}
.carousel-arrow-right {
right: 0;
}
.carousel-arrow:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.carousel-arrow i {
font-size: 20px;
}
</style>