AMP html - switch an image to another image periodically every a few seconds

Question

I want to switch an image to another image every a few seconds on AMP.

I've tried it using amp-script, for example, changing its src, backgroundImage, or append a new img with higher z-index to hide previous image.

But all of them were failed and the console said:

[amp-script] amp-script[script="main"].js was terminated due to illegal mutation.

or

[amp-script] Sanitized [src]="./gallery1.jpeg": ...

So, Is it possible to switch an image to another in AMP? If so, how?

Answer 1

You have several options:

1. Use amp-carousel (it'll have a slide animation though):

2. Use amp-script: mutations are always accepted for amp-script elements with [layout!="container"] and height < 300px.

3. Define a CSS animation that'll cycle through the images (e.g. here is a sample that would work the same way in AMP).

I'd recommend going with either 1. or 3. as these are easiest to implement with least runtime overhead.