The Carousel component displays a series of slides that can be swiped between or selected directly via buttons

The Carousel must contain a Carousel.Slider with nested Carousel.Slides and optionally can include a Carousel.Pagination and Carousel.ArrowPrevious / Carousel.ArrowNext for navigation between slides. Carousel.Slider’s optional overflow prop will cause it to render all slides at once, allowing the user to drag them into view. The aria-selected attribute can be used as a CSS selector to style slides according to whether they are currently selected (see below).

Note that Carousel.Slides must receive an index prop in order to correctly apply styling based on whether they are selected and that Carousel.Arrows should be rendered inside a parent with position: relative in order to be positioned correctly.

<Carousel
slideWidth={200}
slideHeight={200}
numSlides={3}
css={{ position: 'relative' }}
>
<Carousel.ArrowPrevious css={{ position: 'absolute', left: '$2' }} />
<Carousel.ArrowNext css={{ position: 'absolute', right: '$2' }} />
<Carousel.Slider aria-label="Example carousel" css={{ mb: '$4' }}>
<Carousel.Slide index={1} aria-label="Slide 1">
<Box css={{ bg: '$primary', size: 200 }} />
</Carousel.Slide>
<Carousel.Slide index={2} aria-label="Slide 2">
<Box css={{ bg: '$primary', size: 200 }} />
</Carousel.Slide>
<Carousel.Slide index={3} aria-label="Slide 3">
<Box css={{ bg: '$primary', size: 200 }} />
</Carousel.Slide>
</Carousel.Slider>
<Carousel.Pagination css={{ mx: 'auto', width: 'max-content' }} />
</Carousel>

useCarousel hook

useCarousel hook exposes the Carousel context outside.

Documentation about the hook usage https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext

Code snippet:

const Slider = ({ children }) => {
const carouselContext = useCarousel()
const [currentSlide, setCurrentSlide] = React.useState(
carouselContext.state.currentSlide
)
React.useEffect(() => {
function onChange() {
setCurrentSlide(carouselContext.state.currentSlide)
}
carouselContext.subscribe(onChange)
return () => carouselContext.unsubscribe(onChange)
}, [carouselContext])
console.log('carouselContext', carouselContext)
return (
<>
<div>Current slide: {currentSlide}</div>
{children}
</>
)
}
<Carousel
slideWidth={200}
slideHeight={200}
numSlides={2}
css={{ position: 'relative' }}
>
<Carousel.ArrowPrevious />
<Carousel.ArrowNext />
<Slider>
<Carousel.Slider>
// slides
</Carousel.Slider>
</Slider>
</Carousel>

API Reference

Carousel

PropTypeDefaultRequired
slideHeightnumber

-

slideWidthnumber

-

numSlidesnumber

-

className
string

-

-

currentSlide
number

-

-

disableAnimation
boolean

-

-

disableKeyboard
boolean

-

-

hasMasterSpinner
boolean

-

-

interval
number

-

-

isPlaying
boolean

-

-

lockOnWindowScroll
boolean

-

-

playDirection
"forward" | "backward"

-

-

orientation
"horizontal" | "vertical"

-

-

step
number

-

-

dragStep
number

-

-

tag
string

-

-

touchEnabled
boolean

-

-

dragEnabled
boolean

-

-

visibleSlides
number

-

-

infinite
boolean

-

-

isIntrinsicHeight
boolean

-

-

cssCSSProperties

-

-

Carousel.Slider

PropTypeDefaultRequired
style
{}

-

-

className
string

-

-

classNameAnimation
string

-

-

classNameTray
string

-

-

classNameTrayWrap
string

-

-

moveThreshold
number

-

-

onMasterSpinner
() => void

-

-

spinner
() => void

-

-

trayTag
string

-

-

trayProps
HTMLAttributes<HTMLUListElement>

-

-

overflow
boolean

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-

Carousel.Slide

PropTypeDefaultRequired
style
{}

-

-

className
string

-

-

classNameHidden
string

-

-

classNameVisible
string

-

-

indexnumber

-

innerClassName
string

-

-

innerTag
string

-

-

onBlur
() => void

-

-

onFocus
() => void

-

-

tabIndex
number

-

-

tag
string

-

-

cssCSSProperties

-

-

Carousel.Pagination

PropTypeDefaultRequired
className
string

-

-

dotNumbers
boolean

-

-

currentSlide
number

-

-

totalSlides
number

-

-

visibleSlides
number

-

-

disableActiveDots
boolean

-

-

showAsSelectedForCurrentSlideOnly
boolean

-

-

renderDots
RenderDotsFunction

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-

Carousel.ArrowPrevious

PropTypeDefaultRequired
cssCSSProperties

-

-

Carousel.ArrowNext

PropTypeDefaultRequired
cssCSSProperties

-

-