React Spring Carousel

Loop

Being able to loop through the items of your carousel is a very common functionality; React Spring Carousel makes it even easier to implement 😃


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

  export function Component() {
    const { 
      carouselFragment, 
      slideToPrevItem, 
      slideToNextItem 
    } = useTransitionCarousel({
      withLoop: true, // -> make me loop!
      items: (
        <CarouselItem color={i.color}>
          {i.title}
        </CarouselItem>
      ),
    });

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