AMP html - переключать изображение на другое изображение каждые несколько секунд

Question

Я хочу переключать изображение на другое изображение каждые несколько секунд в AMP.

Я пробовал использовать amp-script, например, изменить его src, backgroundImage или добавитьновый img с более высоким z-index, чтобы скрыть предыдущее изображение.

Но все они были неудачными, и консоль сказала:

[amp-script] amp-script [script = "main"]. js был прерван из-за недопустимой мутации.

или

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

Итак, возможно ли переключить изображение на другое в AMP? Если да, то как?

Answer 1

У вас есть несколько вариантов:

1. Использовать ампер-карусель (хотя она будет иметь анимацию слайдов):

2. Использовать сценарий amp: мутации всегда допускаются для элементов сценария amp с [layout! = "Container"] и высотой <300 пикселей. </p>

3. ОпределитьCSS-анимация, которая будет циклически проходить по изображениям (например, , вот пример , который будет работать аналогично в AMP).

Я бы порекомендовал перейти с1. или 3. поскольку их проще всего реализовать с наименьшими накладными расходами во время выполнения.

Answer 2

Вы не можете использовать amp-script для этого, потому что вы должны изменять DOM самостоятельно, а не посредством взаимодействия с пользователем, что невозможно с AMP.

Этого можно добиться с помощью CSS с помощью анимации (если вам нужен цикл изображений).