Built in classNames

Even if the library tries to do its best to be defined as a headless UI library, there might be some cases where we need to apply some custom styles to the hidden part of the Carousel. Here's the list of the classNames that the library applies to the html elements the library needs to render to make the Carousel works properly:

• use-spring-carousel-main-wrapper
• use-spring-carousel-track-wrapper
• use-spring-carousel-item
• use-spring-carousel-thumbs-wrapper
• thumb-item

You can use the browser inspector to better check where those classNames are applied.

Touch action

Since the library uses @use-gesture for handling the touch logic, we sutomatically set the correct css touch-actionvalue for you. Here you can read more about it.

Spring config

By default, the library uses the default react spring configuration preset. If you like to, you can pass a springConfig: object. You can check here for more information about react spring presets.

1
2  const carousel = useSpringCarousel({
3    springConfig: {
4      // config props...
5    }
6  })
7
8  // render stuff...
9