Acrool Carousel

如果你想要做一些客製化

import AcroolCarousel from '@acrool/react-carousel';

<AcroolCarousel
    // ...ignore some 
    height="250px"
/>

Props

參數名稱	類型	Required	預設值	說明
style	CSS.Properties
className	string
setController	(controller: Controller) => void			手動控制輪播
syncCarouselRef	RefObject<AcroolCarousel>			自動同步控制另一個 acrool-react-carousel
data	AcroolSlideCard | AcroolSlideImage[]	✓		輪播項目的資料
slidesPerView	number | auto		1	在 Container 中一次顯示幾個輪播項目
slidesPerGroup	number		1	一頁移動幾個輪播項目
height	string | IAspectRatio			輪播項目的高度
spaceBetween	number			輪播項目的間距
moveTime	number		500(ms)	輪播項目的移動速度
isCenteredSlides	boolean		false	使否使用輪播項目置中模式
isEnableLoop	boolean		false	是否使用重複無限下一個模式
isEnablePagination	boolean		false	是否顯示分頁導航
isEnableNavButton	boolean		false	是否顯示控制上下頁導航
isEnableMouseMove	boolean		true	是否允許滑鼠拖動
isEnableAutoPlay	boolean		false	是否自動輪播
isEnableGPURender	boolean		false	是否使用 GPURender, 如果卡片階層較複雜，可開啟讓滑動較順暢，但較佔用記憶體
isLazy	boolean			背景是否使用懶加載
renderPreloader	() => JSX.Element			背景使用懶加載，而在被載入前的過渡 Element
autoPlayTime	number		5000(ms)	自動播放輪播的間隔秒數
initStartPlayTime	number		5000(ms)	自動播放輪播的間隔秒數
renderNavButton	TRenderNavButton			自定義輪播上下頁導航按鈕
renderPagination	TRenderPagination			自定義輪播分頁
breakpoints	IPropsBreakpoints			響應式設定(RWD)s
onSlideChange	TOnSlideChange			當輪播項目更改Index時的事件
onAnimationEnd	TOnAnimationEnd			當輪播滑動結束後的事件
moveEffect	IMoveEffect			輪播項目移動時的效果
movePercentage	number		0.1	移動距離比例(切換上下頁的判斷)
onMount	() => void			當輪播項目被 componentDidMount 時的事件
isDebug	boolean			是否顯示 Debug 資訊

Controller

控制器

Method Name	Type	Default	Description
slideToPrevPage	() => void		移動到上一頁
slideToNextPage	() => void		移動到下一頁
slideToPage	(page: number, isUseAnimation = true) => void		移動到目標頁面
slideToSourceIndex	(slideIndex: number, options?: {isUseAnimation?: boolean, isEmitEvent?: boolean}) => void		移動到輪播項目Index

IAspectRatio

這裡我們利用CSS的比例屬性 aspect-ratio (不是使用 padding-bottom: ?% 的方法)

參數名稱	類型	Required	預設值	說明
widthRatio	number	✓		比例: 寬
heightRatio	number	✓		比例: 高

TRenderNavButton

type TRenderNavButton = (toPrev: () => void, toNext: () => void) => void

TRenderPagination

type TRenderPagination = (pageTotal: number) => JSX.Element[]

IPropsBreakpoints

interface IPropsBreakpoints {
  [key: number]: Partial<IBreakpointSetting>
}

interface IBreakpointSetting {
  slidesPerView: TSlidesPerView
  slidesPerGroup: number
  height?: string|IAspectRatio
  spaceBetween: number
  isCenteredSlides: boolean
  isEnableLoop: boolean
  isEnablePageContent: boolean
  isEnablePagination: boolean
  isEnableNavButton: boolean
  isEnableMouseMove: boolean
  isEnableAutoPlay: boolean
}

TOnSlideChange

當項目移動時事件回傳資訊

type TOnSlideChange = (carouselState: ICarouselState) => void

interface ICarouselState {
  source: {
    activeIndex: number
    lastIndex: number
    total: number
  }
  virtual: {
    activeIndex: number
    lastIndex: number
    total: number
  }
  page: {
    activePage: number
    total: number
  }
}

TOnAnimationEnd

當項目移動時動畫結束事件回傳資訊

type TOnAnimationEnd = (carouselState: ICarouselState, elementor: Elementor) => void

class Elementor {
    _rootRef: RefObject<HTMLDivElement> = createRef();
    _containerRef: RefObject<HTMLDivElement> = createRef();
    _pageGroupRef: RefObject<HTMLDivElement> = createRef();
    _navGroupRef: RefObject<HTMLDivElement> = createRef();
    _slideItemRefs: IMultiRefObject<Array<HTMLDivElement>> = createRef();
    _pageRefs: IMultiRefObject<Array<HTMLDivElement>> = createRef();
    
    // ...ignore
}

IMoveEffect

在移動中應用不同的動態效果，目前僅支持 transformY，如有其他需求請發 Issue

查看範例效果 MoveEffect Example

參數名稱	類型	Required	預設值	說明
transformY	string			transformY px
moveTime	number		.5s	transform time