Create an Infinite Slider in React

And in addition, save yourself from using third-party libraries.

Infinite slider

Did you ever have to create an infinite slider with different partner logos, or any other stuff when it comes to that?

I don’t know about you, but my approach in scenarios like that is to most likely search online for some library and then just use it. This approach has a few problems:

• third-party dependencies: that can cost you bugs in the future if the library will stop to be maintained,
• bigger than needed project size: since it’s not you who create the component you can’t have power over the package size, if you’re using just one library it shouldn’t alter the performance of your app much, the situation is different if you’re using 10 different libraries,
• too much complexity: funny enough third-party libraries are often much more complex than simple things that we need, so changing something in that case can be harder

Today, you’ll gonna learn once and for all how infinite sliders work, and how you can implement one by yourself.

1. How does an infinite slider work?

First things first. Before the coding part, let’s understand how an infinite slider works. I heard that one image speaks louder than thousand words, so:

Slider work functionality

1. Create two copies of the slider: since we want it to move we actually need to have an overflow. We’re gonna animate it straight to the beginning when it reaches 100%, which brings us to the next point
2. Make it width 200%, or two times what you initially wanted: it will reset when it reaches half of the main width. I know you can think that it can’t be that simple, I would’ve seen it if it would just jump straight to the beginning. Well, it does.
3. Animate it infinitely

2. Coding (the interesting part)

As you can see it’s nothing hard when you put it like that. Now you’ll learn how to code it. I’m gonna paste the full code and we’ll…