Submitted over 3 years ago

Galleria - SvelteKit & Tailwind

progressive-enhancement, svelte, tailwind-css

Jacob•140

@theschmocker

A solution to the Galleria slideshow site challenge

Preview Code

Solution retrospective

I had a tough time getting the masonry layout to work well. Libraries didn't quite do the design justice, nor did various CSS Grid-based workarounds. There were a couple of other CSS-only solutions that could maybe have worked, but felt hackier than what I ended up with. The main problem with my solution is tab order--it goes down each column rather than left-right through the "rows".

Getting the transitions to run correctly when moving forward/backward through the "slides" was a challenge, but overall, working with animations/transitions in Svelte is really nice.

The site is prerendered and (I think) totally usable without JavaScript enabled

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Jacob's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord