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!

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post