為什麼使用 Bear Carousel

這是一個使用 Flexbox 進行開發的 React Carousel

Tip

不是原本的 Javascript Package 再進行二次包裝，單純只為了 React，避免一些奇怪的問題產生。

特性

• 直接使用 React + Flexbox, 不是 Javascript Package 再進行二次包裝
• 更容易使用
• 使用 Flexbox 進行輪播項目位置排版，而不是使用 inline style 用 Javascript 計算輪播項目位置
• 避免輪播中進行重新渲染，使用 item key 判斷項目是否異動，也可切換為使用 memo mode 判斷
• 無需設定項目樣式導致顯示不如預期，Bear Carousel 提供你輪播項目元件(Item component. Image component)，你只需要設定參數即可達到想要的功能
• Slide Item 的高度，依照 Container 的高度
• Loop模式使用 Clone 的方式處理 (不是使用更改項目順序來達成，因為會產生其他問題) issues)
• 滑動時不會觸發 Slide Item 內部的 onClick 事件，從而避免用戶體驗問題 (滑動則開啟頁面)

支援

• 支援 桌上瀏覽器，手機裝置瀏覽器
• 支援 Responsive (RWD) 設定
• 支援 導航按鈕可移出輪播區域，不會受到 overflow 設定影響
• 支援 防止滑動時觸發 onClick 的設定
• 支援 輪播項目 比例設置+附加固定尺寸 或 固定高度設置
• 支援 兩個輪播項目同步控制
• 支援 置中模式
• 支援 Container顯示項目 依項目尺寸顯示自動寬
• 支援 自動播放輪播項目 和 初始輪播時間設置
• 支援 整合鍵盤方向鍵左右控制項目
• 支援 懶加載圖片
• 支援 NextJS 13 (v4.0.14 之後的版本)