Hi!

I have recently finished the work on the tutorial describing how that kind of elements are being created. Due to their universality, I try to avoid libraries 🧐. They come with huge amount of code that I - as regular developer don't understand.

This time I create my own component and I am facing interesting challenges. How to make it work on mobile and desktop devices? How to make it performant? Can we make it as small as possible?

Aims of this project are:

• create a solution for the newest browsers only
• avoid website reflows if possible
• the animation should be as smooth as possible - even for slow devices
• component should be simple
• slider should be lightweight and rely on CSS
• avoid polyfills
• educational purposes
• modular - easy to add or remove features to make code size just right *avoid size computations whenever it's possible (e.g. slide gap feature)- in more complex libraries they are hard to handle; it would also cause this tutorial to be too long
• the component should be easy to understand and scale so I can use it in future projects instead of including another full of features spaceship that in the end won't do much

This tutorial has a lot of interactions 😅. That's why it's kept in my personal blog. You can find it here:

https://www.wiktorwisniewski.dev/blog/build-simple-javascript-slider