Carousel

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>