React Spring Carousel

Overview

React Spring Carousel is a new way of approaching the carousel experience on the web. It embraces the philosophy of Headless UI, which means that it's up to the developer to decide how it will look, while the library will only take care of the internal logic and the behavior of the carousel.

With React Spring Carousel you'll feel for the first time that you have total control on how the Carousel behaves, and you'll find how easy is to interact with it, how simple is to put things on the screen, and how dumb is to make the carousel work.

React Spring Carousel also embraces the full power of the newest React technology, offering Hooks and Context to create and manipulate the behavior of the carousel in any possible way.

Motivation

Why another carousel library? Many times happened to me that while I was investigating which library to implement a carousel I could use in my new project, I always had the feeling that there was something wrong with something (implementation, logic, animation result, etc)

Don't get me wrong, there're lots of good libraries out there, but still, I didn't feel enough free regarding the implementation of the carousel at all. I always had the feeling that I was doing some kind of hack to make it work and fit inside my UI. It wasn't something natural, and that feeling always bothered me.

With React Spring Carousel you're free to create and compose your own carousel without any kind of bounds, without having to override styles or adding weird class names, or some other kind of strange hack and animations feel natural and reals. They respond to user interaction as you've always expected to do.

React Spring Carousel is intuitive, simple and efficient.

Features

  • Performance

    Thanks to React Spring, performances are on top!
  • Mobile

    @use-gesture offers an excellent mobile experience out of the box!
  • Resizable

    The carousel will listen to any resize event and will re-adapt itself accordingly.
  • Slide types

    You have different types of scroll solutions to choose from.
  • Headless UI

    You can compose all the pieces of the Carousel in any way you want.
  • Fullscreen capable

    We use screenfull.js to offer a cross-browser efficient solution.