📅 我們繼續 50 個小項目挑戰！—— DoubleVerticalSlider組件

倉庫地址：https://github.com/SunACong/50-vue-projects

項目預覽地址：https://50-vue-projects.vercel.app/

---

使用 Vue 3 的 Composition API（<script setup>）結合 TailwindCSS 創建一個全屏、左右聯動的垂直輪播組件。左側為文字內容，右側為圖片展示，兩者通過按鈕控制上下滑動切換。

這種設計非常適合用于企業官網首頁、產品介紹頁、作品集展示等需要視覺沖擊力的頁面。

---

🎯 組件目標

• 創建一個全屏垂直輪播組件
• 左右區域內容聯動滑動
• 支持點擊按鈕切換當前 Slide
• 使用 Vue 響應式變量管理狀態
• 使用 TailwindCSS 快速構建布局和動畫
• 實現優雅的滑動過渡效果

---

?? 技術實現點

技術點	描述
Vue 3 <script setup>	使用響應式變量管理當前 slide 索引
ref 響應式變量	控制當前激活的 slide 索引 (activeSlideIndex)
動態類綁定 :class	控制當前 slide 的層級和動畫狀態
內聯樣式綁定 :style	動態設置每個 slide 的背景色或圖片及位移動畫
按鈕事件綁定 @click	觸發上一頁/下一頁切換
TailwindCSS 布局類	構建全屏容器、左右分欄、居中對齊
TailwindCSS 過渡類	添加平滑的滑動動畫

---

🧱 組件實現

模板結構 <template>

<template><div class="relative flex h-screen w-screen overflow-hidden"><!-- 左側 --><div class="relative h-full w-[35%] overflow-hidden"><divv-for="(slide, index) in leftSlides":key="index"class="absolute inset-0 flex flex-col items-center justify-center text-white transition-all duration-500 ease-in-out":class="[index === activeSlideIndex ? 'z-10' : 'pointer-events-none z-0']":style="{backgroundColor: slide.bgColor,transform: `translateY(${-(index - activeSlideIndex) * 100}%)`,}"><h1 class="-mt-8 mb-2 text-4xl">{{ slide.title }}</h1><p class="text-lg">{{ slide.description }}</p></div><!-- 向下按鈕 --><div class="absolute top-1/2 right-0 z-20 -translate-y-1/2"><buttonclass="rounded-l-md bg-white p-4 text-gray-500 shadow hover:text-black"@click="changeSlide('down')">👇</button></div></div><!-- 右側 --><div class="relative h-full w-[65%] overflow-hidden"><divv-for="(slide, index) in rightSlides":key="index"class="absolute inset-0 h-full w-full bg-cover bg-center bg-no-repeat transition-all duration-500 ease-in-out":class="[index === activeSlideIndex ? 'z-10' : 'pointer-events-none z-0']":style="{backgroundImage: `url(${slide.imageUrl})`,transform: `translateY(${(index - activeSlideIndex) * 100}%)`,}"></div><!-- 向上按鈕 --><div class="absolute top-1/2 left-0 z-20 -translate-y-1/2"><buttonclass="rounded-r-md bg-white p-4 text-gray-500 shadow hover:text-black"@click="changeSlide('up')">👆</button></div></div></div>
</template>

腳本邏輯 <script setup>

<script setup>
import { ref } from 'vue'const activeSlideIndex = ref(0)const leftSlides = [{ title: 'Flying eagle', description: 'in the sunset', bgColor: '#FFB866' },{ title: 'Lonely castle', description: 'in the wilderness', bgColor: '#252E33' },{ title: 'Bluuue Sky', description: "with it's mountains", bgColor: '#2A86BA' },{ title: 'Nature flower', description: 'all in pink', bgColor: '#FD3555' },
]const rightSlides = [{imageUrl:'https://images.unsplash.com/photo-1508768787810-6adc1f613514?auto=format&fit=crop&w=1350&q=80',},{imageUrl:'https://images.unsplash.com/photo-1519981593452-666cf05569a9?auto=format&fit=crop&w=715&q=80',},{imageUrl:'https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?auto=format&fit=crop&w=1002&q=80',},{imageUrl:'https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?auto=format&fit=crop&w=1050&q=80',},
]function changeSlide(direction) {if (direction === 'up') {activeSlideIndex.value = (activeSlideIndex.value + 1) % leftSlides.length} else {activeSlideIndex.value =(activeSlideIndex.value - 1 + leftSlides.length) % leftSlides.length}
}
</script>

---

🔍 重點效果實現

? 全屏容器布局

我們使用了以下結構創建全屏容器：

<div class="relative flex h-screen w-screen overflow-hidden">

這樣可以確保整個組件占滿瀏覽器視口，同時防止滾動條出現。

💡 左右區域聯動滑動

通過 transform: translateY(...) 來實現滑動動畫：

transform: `translateY(${-(index - activeSlideIndex) * 100}%)`

左側向上滑動時，文字向上；右側向下，圖片向上，形成“聯動”視覺效果。

🎮 按鈕控制滑動方向

通過兩個按鈕分別控制上一張和下一張：

function changeSlide(direction) {if (direction === 'up') {activeSlideIndex.value = (activeSlideIndex.value + 1) % leftSlides.length} else {activeSlideIndex.value =(activeSlideIndex.value - 1 + leftSlides.length) % leftSlides.length}
}

實現了循環切換功能，避免索引越界。

---

🎨 TailwindCSS 樣式重點講解

類名	作用
flex h-screen w-screen	全屏 Flex 容器
overflow-hidden	防止內容溢出
absolute inset-0	絕對定位，覆蓋父容器
transition-all duration-500 ease-in-out	平滑動畫過渡
bg-cover, bg-center, bg-no-repeat	圖片自適應背景
text-white, text-4xl	文字樣式
rounded-l-md, p-4, hover:text-black	按鈕樣式
top-1/2 -translate-y-1/2	居中垂直定位按鈕

這些 TailwindCSS 類幫助我們快速構建了一個美觀、響應式的全屏輪播組件。

---

📁 數據分離建議（可選）

你可以將 leftSlides 和 rightSlides 提取到單獨的 JSON 文件中，便于維護和國際化：

// slides.js
export const leftSlides = [{ title: 'Flying eagle', description: 'in the sunset', bgColor: '#FFB866' },...
]

并在組件中導入：

import { leftSlides, rightSlides } from '@/data/slides'

---

📁 常量定義 + 組件路由

constants/index.js 添加組件預覽常量：

{id: 26,title: 'Double Vertical Slider',image: 'https://50projects50days.com/img/projects-img/26-double-vertical-slider.png',link: 'DoubleVerticalSlider',},

router/index.js 中添加路由選項：

{path: '/DoubleVerticalSlider',name: 'DoubleVerticalSlider',component: () => import('@/projects/DoubleVerticalSlider.vue'),},

---

---

🏁 總結

Vue 3 和 TailwindCSS 的全屏垂直輪播組件不僅實現了左右聯動的滑動效果，還展示了如何通過響應式數據驅動 UI 變化。

適合用于需要高視覺表現力的網頁場景，如企業主頁、產品介紹頁、攝影作品展示等。

你可以進一步擴展此組件的功能包括：

• ? 自動播放（定時切換）
• ? 支持鍵盤上下鍵切換
• ? 添加分頁指示器（圓點或數字）
• ? 支持觸摸滑動（移動端適配）
• ? 將組件封裝為 <AppCarousel /> 可復用組件

---

👉 下一篇，我們將完成ToastNotification組件，一個非常有趣的氣泡消息通知。🚀

感謝閱讀，歡迎點贊、收藏和分享 😊