Infinite Carousel with React Spring: How to?

React Spring is a fantastic animation tool, but it’s not the most straight forward. In this article we’ll go through how to build an infinite React Spring carousel.

Before we go any further let me show you what the final product of an infinite react spring carousel looks like. And don’t forget to check out my previous React Spring tutorial if you’re still getting to grips with the library.

This carousel is built with mobile in mind. The idea was to make it feel as native as possible so that it would feel natural to swipe on mobile. The settings for swiping are very simple to change so ideally it shouldn’t be too hard to play around with it.

Infinite Carousel Example

I know, I know, time is money. So here’s the final version, hosted on Codesandbox. It does have a couple of settings so if you want to customize it, read on.

First of all, credit where credit is due. This is a fork of Infinite Slideshow by Dbismut. He did amazing work figuring out the maths behind making the slideshow infinite.

My implementation tries to make it more useful to a real-world scenario as well as making it more mobile friendly.

<InfiniteCarousel items={items} itemWidth={'full'}>
  {({ css }, i) => (
    <Content>
      <Image style={{ backgroundImage: css }} />
    </Content>
  )}
</InfiniteCarousel>

To make it work you shouldn’t need to do anything else outside importing the Component and inserting it into your page. However there’s a couple of options here that can be useful to knowing.

  • itemWidth: This can be set to 'full' or int. ‘full’ will cause the carousel to become as wide as the window allows, while any number will set a fixed width.
    • itemWidth also sets the size of each slide, which allows extra customization. More on that later.
  • items: Is a JSON array of objects that we want to be in our carousel. In this example they’re images, but we could change our carousel’s code to work with anything (read on for an example).
  • visible: Is how many slides should be rendered. This defaults to 4 and should be left at its default value in most cases. Modify it only if you have 2 to 4 slides.
  • sensitivity: Defines how low the threshold is to move to the next slide. Lower values will mean a flick is enough to change slide; higher means more speed is required to move. Defaults to 1.

Customizing your React Spring Carousel

The example above is commented to make its inner workings more clear, but there are a couple of things that should be more thoroughly explained.

Width and ItemWidth

In my example, these two are one and the same, meaning a slide will always be the same size as the container. However, take a look at this extra example:

By manually setting a value for the innerWidth, we can make our React Spring Carousel show the previous and next slides while keeping all the functionality it previously had.

Here, the offset value comes into play:

  const offset = itemWidth === 'full' ? 0 : (windowWidth - itemWidth) / 2

This makes sure that our active slide is centered within the Carousel at all times.

Adding an Instagram-like counter to your carousel

I’ve always been a big fan of how simple and satisfying the interaction in Instagram galleries is. Luckily that’s also fairly easy to replicate! We just need to make a couple of verbose calculations to account for being able to swipe left and right:

if (index.current + 1 > items.length) {
  setActive((index.current % items.length) + 1)
} else if (index.current < 0) {
  setActive(items.length + ((index.current + 1) % items.length))
} else {
  setActive(index.current + 1)
}

And we have a great looking counter.

Adding text and other elements to your carousel

You know when you start up one of Google’s apps for the first time and you get a really inviting slideshow of how to use it? I always liked that – it’s a nice touch even though most people will only see it once.

Luckily that effect is easy to achieve with our existing carousel skeleton.

All we did here was feed the page data into a new spring for the bottom navigation and voila!

So there you have it. Some useful info on creating an infinite carousel with React Spring. If you have any tips to share, leave them in the comments for other people to find!

0