React Spring Carousel

React Spring Carousel

Nav buttons

So far so good. Now let's add some interactivity. You may wonder how to programmatically interact with the carousel: let me introduce you the slideToPrevItem and slideToNextItem methods 🚀


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

  export function Component() {
    const { 
      carouselFragment, 
      slideToPrevItem, 
      slideToNextItem 
    } = useSpringCarousel({
      items: mockedItems.map((i) => ({
        id: i.id,
        renderItem: (
          <CarouselItem color={i.color}>
            {i.title}
          </CarouselItem>
        ),
      })),
    });

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

As you can see, interactivity implementation is very easy, and also very readable. Furthermore, you have total control about who will trigger the carousel slide.

prevStylednextLoop