Wayne Lu 的輪播 project

demo: https://wayne23123.github.io/carousel/

您好，歡迎來到 Wayne Lu 的輪播 project

這個輪播功能使用 html + css + JavaScript + Vue 製作而成

先在 ul 做v-for="(img, index) in imgs"將 5 個 li 標籤引入圖片 imgs

目標是先用一個 div 將這個 ul 列表包起來

在這個 div 加上 position: relative

讓這 5 張圖片重疊在同一位置

宣告一個 showCarousel = ref(0) 的 ref 值 (代表從第0張開始)

利用 v-show="index == showCarousel" 來決定目前要顯示第幾張

再來宣告 startCarousel 函式將 showCarousel.value++

另外對 showCarousel 加上了 if 判斷式

判斷邏輯 : 當我目前要顯示第幾張 大於 我引入圖片的長度

要顯示第一張的前一張 (showCarousel.value = -1)

之後做 showCarousel.value++

再加上 transition-group 而達到輪播的功能

另外加上了 setShowCarousel 對 index 值做判斷式

判斷邏輯 : 當按往左按鈕要動畫從左邊進來

如果按到 index ˂ 0 要將 showCarousel 設定到最後一張

當按往左按鈕要動畫從右邊進來

如果按到 index > 最後一張 要將 showCarousel 設定到第一張