React Marquee Slider

The marquee slider of your deepest dreams. Only for React.js.

Take me to the playground

Inspiration

I've run across these kinds of sliders now and then, and each time I was so fascinated that I wanted to use it myself. But then I quickly realized that the websites having these didn't just use a simple npm package (or jQuery plugin, if you want to go back that far in time). The positions of the child elements always were hardcoded. For this reason, I repeatedly walked away with another bookmark and the promise to come back one day.

I am running a lot of my code on Zeit (and you should, too!). So once again, I stumbled about this "marquee slider," and I liked their implementation (design-wise) so much, that I finally decided to write a generic library to position the elements.

Development

If you want to, by definition, scatter the child elements randomly across the available space, you get confronted with the major underlying problem: You can't know what size the children have before rendering (and measuring) them on screen, thus being unable to determine definite positions upfront.

Instead, the only approach (as far as I could see) is to render the child elements inside the available space and discard the ones that overlap with other children. Depending on the container size and child sizes, this process may take some time. You also need to take into account that children may be positioned so unfavorably that you need to reset all of them from time to time, instead of just the last one overlapping a sibling.

Therefore I put a lot of attention into the algorithm and its performance. Memoization and simple approaches to the codebase are making the compilation (as long as you leave the room in the user-defined limits) blazingly fast. Once child positions are determined, CSS takes over the actual animation, boasting an unparalleled and smooth performance.

By cleverly choosing parameters, like container size, child amount and sizes, and reset counters, you can keep the trial duration to a few dozen to hundreds of milliseconds. react-marquee-slider further gives you an event which will notify you on completion.

Benefits

The result is a remarkably adaptable slider component that you can use to create superb review sections, unprecedented icon clouds, and being creative really on a lot more occasions.

It will position elements seemingly random, so you merely need to adjust parameters for various screen sizes. All the implementations I've seen until now had firmly determined child positions - which can be fantastic in terms of consistency. There is nothing that requires time to calculate, too. However, such solutions will quickly become a nightmare if you want to change the number or size of child elements.

And that's the powerful benefit of react-marquee-slider: For the relatively low cost of demanding an initial computation time, it gives you a simple plug-and-play solution to build immaculate marquees with legitimately randomly positioned children.

See more examples and play around with settings live on the demo playground.

Star