How to replicate 'fade' effect from image slider?

Ask us anything
1

Hi!

I have a div that shows a picture based on variables. This method (looking up a new picture) causes glitches when the new picture is loaded.

Question: how can I prevent these glitches?

I noticed that the image slider component has the option to ‘fade’ between pictures. Is there a way to replicate this?

See a demonstration: PART 1 shows the glitches, PART 2 shows the slider with ‘fade’ effect: [https://api.neemjevoorsprong.nl/vault/90aGnL3G/MVxiOaVaDX6MVlPA7pfNc6LTJ80/OtcCtQ../demo+vraag+glitches+Weweb+community.mp4](https://demo recording)

Thanks!
Thijs

2

You might wanna always load three pictures, the previous, the current and the next. The glitching happens because your browser takes longer to download it and the other one is already hidden before the next one is loaded. You can see this when you load all of the levels and then just switch between them.

1 Like