DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to create modular and lightweight Carousel without any frameworks
Wiktor WiΕ›niewski
Wiktor WiΕ›niewski

Posted on

How to create modular and lightweight Carousel without any frameworks

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

Top comments (0)

18 Useful Github Repositories Every Developer Should Bookmark

18 Useful GitHub repositories every developer should bookmark: everything from learning resources and roadmaps to best practices, system designs, and tools.