API

SwipiCarousel

The object you get back: state to render from and methods to command with.

The object

The second item of the tuple is the whole API: state to render from and methods to command with, in one place.

React

type SwipiCarousel = {
  selectedIndex: number
  snapCount: number
  slidesCount: number
  canScrollNext: boolean
  canScrollPrev: boolean
  hasOverflow: boolean
  scrollNext: () => void
  scrollPrev: () => void
  scrollTo: (index: number) => void
}

State

Field	Type	Description
`carouselRef`	`(node: HTMLElement \| null) => void`	Goes on the viewport; the track is found as its only child. It is a callback ref, so it can be passed to any component that forwards a ref.
`selectedIndex`	`number`	Index of the current snap position, counted from zero.
`snapCount`	`number`	Number of snap positions. Fewer than the number of slides whenever more than one slide is visible.
`slidesCount`	`number`	Number of slides found in the track.
`canScrollNext`	`boolean`	Whether a next scroll is possible. Always true while `loop` has something to loop.
`canScrollPrev`	`boolean`	Whether a previous scroll is possible.
`hasOverflow`	`boolean`	Whether there are more slides than fit — that is, whether dragging does anything at all.

Methods

Method	Type	Description
`scrollNext`	`() => void`	Move to the next snap.
`scrollPrev`	`() => void`	Move to the previous snap.
`scrollTo`	`(index: number) => void`	Move to a given snap index. Without `loop` the index is clamped to the last snap; with it the index wraps and the carousel takes the shortest way round.

The three scroll methods are stable, so they can be bound straight to a click without a wrapper — see Arrows and Dots.

Identity

React

const [carouselRef, carousel] = useSwipiCarousel()

useEffect(() => {
  track('carousel_viewed', { index: carousel.selectedIndex })
}, [carousel])

Before the first measurement

Before the viewport is attached — and on the server — everything derived from the DOM is empty: slidesCount and snapCount are 0, hasOverflow and both scroll flags are false. That is what makes hydration silent — Server rendering has the details.