Vue.JS 無限輪播 Slider

一開始我的想法，是以改變 CSS 樣式控制輪播要跑到哪個位置。
總覺得沒有其他方式可以寫嗎？
可不可以用資料來控制呢？
透過搬動資料的方式，就可以處理好位置？
心中產生無限好奇，於是...
Vue 提供 Transition Group 的方法，讓這個想法可以實現。

概念說明
1. Javascript 控制資料
3. 樣式與定位讓 CSS 負責
2. 向左向右的滾動交給 Vue Transition Group

文章架構
- Step1 Slide 需要的 HTML & CSS
- Step2 建立控制事
- Step3 擴展資料件
- Step4 連點的防呆機制 (Optional)
- 完成範例 & 參考資料

Step1 — Slide 需要的 HTML & CSS

1. 清單內容 HTML
2. 控制左右的 HTML
3. 簡單示意 CSS 樣式

Step2— 建立點擊事件控制向左或向右滾動

Step3 — 擴展資料

根據你要在可以顯示的區域中，可視區域中最左邊與最右邊的<li>
向外各需要多2個看不到的<li>元素

1. 建立一個 slideData 的空陣列
2. 在 mounted 時擴展原本的資料

/* 預計產生的物件格式 */
slideDate: [{
  id: 0,
  ref: 0
}]

目前範例中的資料來說，一次要顯示3筆資料要達到無限捲動
就需要至少7筆資料。

因此需要將原始資料擴展2倍的資料數
免去考慮哪筆資料要接續後面的麻煩

Note: 
用純Javascript也是可以用JSON.stringify()，或是lodash_.cloneDeep()來達成類似的效果(我自己本來也是這樣用XD 但缺點就是會產生一大包的 Array)
地雷注意: 
使用 Transition Group 中的 v-for HTML 一定要綁上 Key 不然不會動！
Vue transition-group 詳細說明屬性，可參考 Vue 官網：
https://cn.vuejs.org/v2/guide/transitions.html#%E5%88%97%E8%A1%A8%E7%9A%84%E6%8E%92%E5%BA%8F%E8%BF%87%E6%B8%A1
這次的小功能就是從文章中延伸

到以上步驟基本上就完成了，最基本的 infinity 左右輪播的功能
但「👋賤」的你一定會瘋狂點擊向左向右的按鈕吧！
然後你就看到輪播項目飛起來了 🙀

Step4 —簡易 阻擋手賤連點(Optional)

主要這邊我想要添加一個變數，去紀錄我點擊了沒
點了之後鎖定不讓點，等待一陣子才將點擊變數改回預設值

以上簡單的4個步驟就完成囉！！🎉

總結來說：

就我個人來說，我自己蠻喜歡這個做法的
覺得這個做法的好處是，將 CSS/JS/HTML 各自要負責的事情分得很開，
比較不會在 Javascript 檔案中看到一坨需要 return CSS 樣式。
這個範例的延伸後續也可以加上 autoplay/狀態/ swiper 等等
如果是手機版的呈現的話，就只要改 CSS BreakPoint 就好了！
️️⬇️ ⬇️ ⬇️ 底下附上完成範例

使用 PayPal.Me 支付 Ilandy.Chiu