Acrool Carousel

If you want to do some customization

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

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

Props

Props Name	Type	Required	Default	Description
style	CSS.Properties
className	string
setController	(controller: Controller) => void			Manual control carousel
syncCarouselRef	RefObject<AcroolCarousel>			Auto sync control acrool-react-carousel
data	AcroolSlideCard | AcroolSlideImage []	✓		Slide item data
slidesPerView	number | auto		1	The number of items displayed in the container
slidesPerGroup	number		1	Show several items on one page
height	string | IAspectRatio			Carouse height
spaceBetween	number			distance between items
moveTime	number		500(ms)	Slide moving time
isCenteredSlides	boolean		false	Center display mode
isEnableLoop	boolean		false	Repeat display loop mode
isEnablePagination	boolean		false	Show pagination
isEnableNavButton	boolean		false	Show nav button
isEnableMouseMove	boolean		true	Mouse drag switch
isEnableAutoPlay	boolean		false	Auto slide item
isEnableGPURender	boolean		false	Whether to use GPURender, if the card hierarchy is more complex, you can turn it on to make the sliding smoother, but it will take up more memory.
isLazy	boolean			bg Lazy loading
renderPreloader	() => JSX.Element			bg Lazy mode preloader content
autoPlayTime	number		5000(ms)	Auto slide item time
initStartPlayTime	number		5000(ms)	Init start auto slide item time
renderNavButton	TRenderNavButton			Custom render nav button
renderPagination	TRenderPagination			Custom render pagination
breakpoints	IPropsBreakpoints			RWD breakpoints
onSlideChange	TOnSlideChange			Carousel state change event
onAnimationEnd	TOnAnimationEnd			slider onAnimationEnd event
moveEffect	IMoveEffect			Carousel card move effect
movePercentage	number		0.1	Movement distance ratio (judgment for switching between previous and next pages)
onMount	() => void			Carousel componentDidMount event
isDebug	boolean			Visible debug info

Controller

Controller

Method Name	Type	Default	Description
slideToPrevPage	() => void		Slide to prev page
slideToNextPage	() => void		Slide to next page
slideToPage	(page: number, isUseAnimation = true) => void		Slide target page
slideToSourceIndex	(slideIndex: number, options?: {isUseAnimation?: boolean, isEmitEvent?: boolean}) => void		Slide target item

IAspectRatio

Here we use the proportional property of CSS aspect-ratio (not the padding-bottom % method)

Props Name	Type	Required	Default	Description
widthRatio	number	✓		proportionately width
heightRatio	number	✓		proportionately high

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

Apply different dynamic effects on the move, Currently only transformY is supported, please issue if you have other needs

MoveEffect Example

Props Name	Type	Required	Default	Description
transformY	string			transformY px
moveTime	number		.5s	transform time