Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
16 Февраля 2017 в 16:49

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

0 3528

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

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

ezgif.com-4626d20372.gif

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

<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>

<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>

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

sub-carousel.gif

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

form.gif

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

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

(Голосов: 6, Рейтинг: 5)
0 комментариев
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.

Отправьте отзыв!