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

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

0 3302

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

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

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