Discussion on: The power of SvelteJS: building an animated image carousel in <30 lines of code ✨

thompson4822 profile image

I found your article to be really compelling. In my case, what I'm trying to do is show different images that transition from one to the next for food items at a restaurant. But I want this to happen in place - the original image fades away and a new image fades in over the old.

With the Svelte solution here, I sort of get that, except it ends up behaving like the album covers example you show, where briefly the next image is shown to the right. What is the easiest way to avoid this?

bholmesdev profile image
Ben Holmes Author

Yeah no prob! Forgot to explain the CSS you'll need for this example. You can check out the REPL link in the TL;DR, but you'll need to add position: absolute to each of the images. That way, they'll be positioned one on top of the other in the container, so they can cleanly fade between each other.