[筆記] 哎呀！不小心刻了一套 React UI 元件庫 15 – Carousel

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Carousel。

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

內容

輪播 Carousel 是在可視範圍內進行展示。除了提供圖片來源外，還可以手動控制播放、自動播放、指示點、播放速度。

---

參數

1. dataSource – 輪播資料
2. autoplay
3. autoplaySpeed
4. imgWidth – 圖片寬度，會等同於 Carousel 的寬度
5. imgHeight – 圖片高度
6. hasControlArrow – 顯示左、右控制
7. hasDots – 顯示指示點

---

概念

1. CourselWrapper 會需要設定 position: relative，其餘內部的元件像是 ImageWrapper, ControlButtons, Dots 都是使用 position: absolute 定位
2. ImageWrapper 需要加上 overflow: hidden 來確保轉場時，以及其餘的圖片不會顯示出來
3. 因為圖片一開始呈現時都是「水平排列」，所以要透過 transition 在 left 改變時，將畫面平滑轉移
4. makePosition 就是用來計算圖片水平排列時的位置
5. handleUpdateCarouselWidth 可以確保在 Carousel 生成時，準確取得預掛載的 DOM 寬度。另外在 useEffect 中 return 一個清 clear 函式，可以確保在執行完畢後被移除，以免記憶體過度佔用

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/7e67c3a637d2755a9654bae0f415c3005bbf3066

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] HTML Input Date 最小值 最大值於 Safari 上失效
• [筆記] Vue3 元件更新 Component Update
• [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 34
• [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 35
• [筆記] The Linux Command Line: A complete Introduction 指令大全心得 – 14