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!