在顯著的網站和應用程序中，輪播圖被用來展示媒體和有吸引力的信息。使用Vue，您可以輕松地創建一個滑動輪播圖組件來使您的網站看起來更具有吸引力。本文將介紹如何使用Vue和CSS創建一個漂亮的垂直輪播圖。

在創建組件之前，我們需要定義要用到的數據。我們需要一個輪播圖對象數組，每個對象包含一張圖片的URL和標題。我們還需要一個currentSlide變量來跟蹤當前顯示的輪播圖索引。這些數據可以放在組件的data對象中。下面是一個示例數據：

<script>
export default {
data() {
return {
slides: [
{
image: "https://example.com/1.jpg",
title: "Slide 1"
},
{
image: "https://example.com/2.jpg",
title: "Slide 2"
},
{
image: "https://example.com/3.jpg",
title: "Slide 3"
}
],
currentSlide: 0
};
}
};
</script>

現在我們可以開始編寫我們的輪播圖組件。我們將使用Vue的計算屬性來計算下一張圖像的索引，并使用CSS動畫來實現漂亮的過渡效果。下面是完整的代碼：

<template>
<div class="carousel">
<div class="slide"
v-for="(slide, index) in slides"
v-bind:key="index"
v-bind:class="{ active: index === currentSlide }"
v-bind:style="{ 'background-image': 'url(' + slide.image + ')' }">
<h2>{{ slide.title }}</h2>
</div>
</div>
</template>
<style>
.carousel {
height: 100%;
width: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slide.active {
opacity: 1;
}
h2 {
position: absolute;
bottom: 0;
left: 0;
padding: 1em;
margin: 0;
color: white;
text-shadow: 0 0 1em black;
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
}
</style>
<script>
export default {
data() {
return {
slides: [
{
image: "https://example.com/1.jpg",
title: "Slide 1"
},
{
image: "https://example.com/2.jpg",
title: "Slide 2"
},
{
image: "https://example.com/3.jpg",
title: "Slide 3"
}
],
currentSlide: 0
};
},
computed: {
nextSlideIndex() {
return (this.currentSlide + 1) % this.slides.length;
}
},
mounted() {
setInterval(() =>{
this.currentSlide = this.nextSlideIndex;
}, 5000);
}
};
</script>

現在我們的組件可以在頁面上呈現了，每5秒鐘自動切換到下一張圖片。我們使用了CSS輪播圖動畫和組件的computed屬性來計算下一個要顯示的圖片的索引，這使得我們的組件更加靈活和可維護。這就是如何使用Vue創建一個漂亮的垂直輪播圖。