React Spring Carousel

React Spring Carousel

Drag

Dragging functionality is enabled by default, and under the hood is powered by the excellent library of @use-gesture. If you want to, you can easily disable it:


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

  export function Component() {
    const { 
      carouselFragment, 
      slideToPrevItem, 
      slideToNextItem 
    } = useSpringCarousel({
      disableGestures: true // -> Hello there!,
      items: (
        <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 may've already noticed, when you start dragging, at some point the carousel slides to the previous/next item. That's because there's a treshold (defaults to itemWidth / 4) that, when reached, the carousel triggers the sliding animation. Of course, you can configure that treshold 🧐

Note: in order to ensure the best result possible, the maximum value that you can pass is the half width of a single carousel item.

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

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

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