About
Advertise on Ironeko

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.

Edit 8/9/2020: I've made some significant improvements to the carousel script in this article. These include:

  • Autofitting the carousel to its container
  • Back and Forward buttons
  • More clear options
  • Better logic

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.

<InfiniteSlider items={items} showButtons={false} showCounter={false}>
  {({ css }, i) => (
    <Content>
      <Image style={{ backgroundImage: css }} />
    </Content>
  )}
</InfiniteSlider>

To make it work you shouldn't need to do anything else outside importing the Component and inserting it into your page. This new version comes with a few options and differences from the first one we published:

  • width: Width is now automatic. The Carousel will expand itself to the size of its container without any extra code.
  • visible: Visible was used to fix edge cases. The slider will now set visible slides automatically without any problems as long as the slider contains more than 2 elements.
  • showButtons: A true/false option to show or hide buttons to navigate the carousel.
  • showCounter: A true/false option to show or hide the counter at the bottom.

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.

Handling width and height

In version 1.0 the width of this react-spring carousel had to be set manually. This was obviously not the best solution and made it quite hard to use.

In version 2.0 of the carousel, the component is wrapped within another component which sole purpose is to find out how much space there is available and to pass that value down to the infinite slider.

This means that in the example above you can simply change the container width:

const Main = styled.div`
  width: 80%;
`;

And the carousel will automatically change sizes.

Height still has to be set manually. I don't think this is as big of an issue as the width, but please let me know if you'd like me to add a solution for this as well.

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!

home
AboutPrivacy