DEV Community

Cover image for Snap carousel
Tamer
Tamer

Posted on

Snap carousel

In the last few days I have been asked to find a pure css solution to build an images carousel, I immediately thought about the current solution, however I also focused on what js gives the added value and therefore what I would have to give up with the my css solution.

I analyzed the previous js carousel and noticed:

  • display of upcoming images
  • interaction buttons
  • snap effect

Here I found an equivalent solution:

  • Arrangement of the different images with 100% height and automatic width in a div with horizontal overflow
  • touch interaction
  • css scroll snap

What have I given up? Nothing!
What have I gained? A simpler structure and a lot of #performance!

Discussion (1)

Collapse
fcalderan profile image
Fabrizio Calderan

Hi Tamer, if you're looking for a css-only approach for carousels maybe this article could be interesting for you, since it adds a bottom navigation.