React Spring Carousel

React Spring Carousel

Slide axis

By default, the sliding axis of the carousel is x - horizontal but, if you like to, you can change it 😈


import { useSpringCarousel } from 'react-spring-carousel'

export function Component() {
  const { 
    carouselFragment, 
    slideToPrevItem, 
    slideToNextItem 
  } = useSpringCarousel({
    carouselSlideAxis: 'y' // -> Yeah science!,
    items: (
      <CarouselItem color={i.color}>
        {i.title}
      </CarouselItem>
    ),
  });

  return (
    <div>
      <button onClick={slideToPrevItem}>Prev item</button>
      {carouselFragment}
      <button onClick={slideToNextItem}>Next item</button>
    </div>
  );
}

Everybody says that the limit is the sky, and that's a cool thing so, why should the library go against that cool rule?


import { useSpringCarousel } from 'react-spring-carousel'

export function Component() {
  const { 
    carouselFragment, 
    slideToPrevItem, 
    slideToNextItem 
  } = useSpringCarousel({
    carouselSlideAxis: 'y'
    thumbsSlideAxis: 'y' // To the infinityyyy, aaaand beyond...,
    items: (
      <CarouselItem color={i.color}>
        {i.title}
      </CarouselItem>
    ),
  });

  return (
    <div>
      <button onClick={slideToPrevItem}>Prev item</button>
      {carouselFragment}
      <button onClick={slideToNextItem}>Next item</button>
    </div>
  );
}
prevDragnextFullscreen