自我挑戰的第九天，快要三分之一了，加油！

Day9:轉盤/輪播(Carousel)

關於Carousel，我自己給的簡單定義是，當網頁空間不想要使用單純死板的縮圖網格來呈現圖像或其他內容時，就可以使用Carousel，這也很常用在擁有豐富圖片內容，想要吸引使用者的網頁上使用。

• 利用橫向或直向收納item，並且允許使用者來回捲動瀏覽更多項目。
• 會用在：圖像、商標、螢幕截圖、相片縮圖⋯⋯等等的，這些item大多都有相似的尺寸。
• 是個充滿驚喜的操作模式，使用者被鼓勵可以往後瀏覽更多項目，並且無法直接跳到清單深處的某一個項目，只有靠互動（捲動）才能發現新大陸。
• 在行動裝置上，可以縮小成另外一種形式—幻燈片（Filmstrip)，在小螢幕上，一次只呈現一個項目，User需要用手指掃過或捲動螢幕看到其他項目。
• Carousel的數量最少要3-4(頁)，但盡量不要超過10（頁），太多會讓使用者覺得沒完沒了。
• 在Carousel的兩側加上箭頭，提示使用者在視窗之外有更多內容。
• 可以讓Carousel的項目頭尾相連，在點擊上下一頁時，加上提示的圖示告訴使用者目前在第幾頁了。

以下的例子都是舉靜態不會主動播放的例子為例：

第一個例子，netflix登入後的挑選片單的介面，可以看到有左右箭頭可以點選，來瀏覽更多影片。

第二個例子，是amazon的更多商品發現，透過這樣子的推薦，可以吸引使用者多看看他們可能會購買的更多商品。

補充：在netflix的介面上，還有做到放大滑鼠所hover的項目，並且自動播放該劇的介紹影片。放大滑鼠所選擇或是hover的項目也是Carousel常用的手法之一。

最後一樣是補充可以直接使用的資源:

這次我把可以使用的npm的package先放前面，因為比較貼近上面舉的例子的樣式。
https://www.npmjs.com/package/react-material-ui-carousel
https://www.npmjs.com/package/react-multi-carousel
https://www.npmjs.com/package/react-alice-carousel

除此之外，之前常用來當作補充資源的Bootstrap，但我覺得他們提供的樣式比較接近適合行動裝置使用的幻燈片（Filmstrip)模式，但也是列出來供大家參考。

• Boostrap的Carousel

• Bootstrap(React)版本的Carousel