Новые возможности в AMP-библиотеке

Google анонсировал серия новинок в AMP-библиотеке.

Во-первых, новый JS-метод (goToSlide) поддерживает прокрутку <amp-carousel> после конкретного слайда по касанию пользователя. На выходе разработчики получат галерею изображений около каруселью: пользователю нужно только кликнуть на интересующую его картинку, воеже карусель прокрутилась до нее.

Пример реализации:

<!— Primary Carousel —>

<amp-carousel id="carousel-with-preview"

width="400"

height="300"

layout="responsive"

type="slides">

<amp-img src="https://example.com/path/to?image=10"

width="400"

height="300"

layout="responsive"

alt="a sample image"></amp-img>

<amp-img src="https://example.com/path/to?image=11"

width="400"

height="300"

layout="responsive"

alt="a sample image"></amp-img>

</amp-carousel>

<!— Carousel thumbnails —>

<div class="carousel-preview">

<button on="tap:carousel-with-preview.goToSlide(index=0)">

<amp-img src="https://example.com/path/to?image=10"

width="60"

height="40"

layout="responsive"

alt="a sample image"></amp-img>

</button>

<button on="tap:carousel-with-preview.goToSlide(index=1)">

<amp-img src="https://example.com/path/to?image=11"

width="60"

height="40"

layout="responsive"

alt="a sample image"></amp-img>

</button>

</div>

Благо изображений очень много, можно добавить маленькую карусель под основной.

А нет слов-вторых, <amp-selector> облегчит интеграцию превью изображений в формы и позволяет делать больше вовлекающий контент.

Команда AMP ждет вашу обратную связь на AMP GitHub repo.

Источник: amphtml.wordpress.com

Источник: www.seonews.ru