[vue組件]無縫輪播圖

該文章請對應源碼閱讀，github源碼地址，DEMO使用地址，線上DEOM展現。

作一個vue基礎組件系列，使用vue以最簡潔的方式實現經常使用組件，可用於快速二次定製化開發。

(๑•̀ㅂ•́)و✧不定時更新，歡迎 star，討論，指教。

實現原理

1. 無縫滾動預處理

爲了無縫滾動，在傳進來的imgs數組首部增長末尾元素，在尾部追加首元素,看圖1

2. 數據綁定視圖

（1）activeIndex爲當前顯示的輪播圖索引，而後只須要對activeIndex進行操做，watch監聽activeIndex的變化，一旦到達了邊界就重置activeIndex，顯示出對應的圖片。過渡動畫則由css3的transition屬性完成。
（2）isResetIndex爲watch監聽的activeIndex變化時，判斷這次變化是否activeIndex已經到達了邊界，若是是則爲true，同時須要重置activeIndex（且此過程爲瞬間完成，無過渡動畫，詳情見圖2），反之false

3.邊界變化的兩種狀況