AMP

amp-carousel

Общая карусель, которая предназначена для показа похожих материалов вдоль горизонтальной оси и отличается гибкостью и эффективностью.

Скрипт<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Поддерживаемые макеты
  • Карусель: fixed, fixed-height, nodisplay.
  • Слайды: fill, fixed, fixed-height, flex-item, nodisplay, responsive.
ПримерыПримеры на AMP-страницах:

Принципы работы

Каждый непосредственный дочерний элемент компонента amp-carousel представляет собой элемент карусели. У каждого из этих узлов также могут иметь дочерние элементы HTML.

Карусель состоит из определенного числа элементов. Кроме того, при необходимости на нее можно добавлять дополнительные стрелки, позволяющие перейти к предыдущему или следующему элементу.

Переход по карусели выполняется, если пользователь проводит пальцем по экрану, а также нажимает на клавиши со стрелками или на дополнительные стрелки.

Показать код полностью

Переход к нужному слайду

Если в качестве метод для атрибута on в элементе задать tap:carousel-id.goToSlide(index=N), при нажатии пользователя в карусели с идентификатором carousel-id будет выполнен переход к слайду с порядковым значением index=N (значение первого слайда – index=0, второго – index=1 и т. д.).

В этом примере приводится карусель с тремя изображениями, под которой расположены кнопки предварительного просмотра. При нажатии на одну из кнопок показывается соответствующий элемент карусели.

Показать код полностью

Атрибуты

typeТип отображения элементов на карусели. Возможные варианты:
  • carousel (по умолчанию). Показ и прокрутка слайдов выполняется по горизонтали. В этом типе поддерживаются следующие макеты: fixed, fixed-height и nodisplay.
  • slides. Выполняется показ по одному слайду. В этом типе поддерживаются только следующие макеты: fill, fixed, fixed-height, flex-item, nodisplay и responsive.
height (обязательно)Высота карусели в пикселях.
controls (необязательно)Постоянно показывает клавиши со стрелками влево и вправо, с помощью которых пользователи могут переходить от одного элемента карусели к другому на мобильных устройствах. По умолчанию такие клавиши на мобильных устройствах исчезают в течение нескольких секунд. Показ клавиш со стрелками также можно настроить с помощью стилей. Чтобы эти клавиши появлялись только на экранах с определенной шириной, можно использовать специальный запрос медиа. На компьютерах клавиши со стрелками показываются до тех пор, пока на карусели представлены по меньшей мере два дочерних элемента.
data-next-button-aria-label (необязательно)Настройка элемента aria-label в атрибуте amp-carousel-button-next. Если значение не задано, то элементу aria-label по умолчанию назначается вариант "Следующий элемент в карусели".
data-prev-button-aria-label (необязательно)Настройка элемента aria-label в атрибуте amp-carousel-button-prev. Если значение не задано, то элементу aria-label по умолчанию назначается вариант "Следующий элемент в карусели".
data-button-count-format (необязательно)Строка формата, которая имеет вид (%s of %s) и используется в качестве суффикса в элементе aria-label для атрибута amp-carousel-button-next/amp-carousel-button-prev. Это позволяет предоставлять информацию пользователям программ чтения с экрана об их действиях с каруселью. Если не указать значение, будет задан вариант по умолчанию –(%s of %s).
autoplay (необязательно)Переход от одного слайда к другому без участия пользователя.
Если для атрибута не задано значение, то он:
  • По умолчанию выполняет переход к следующему слайду с интервалом в 5000 миллисекунд (5 секунд). Изменить эту настройку можно с помощью атрибута delay.
  • Добавляет атрибут loop в компонент amp-carousel, если его ещё там нет.
  • Выполняется только при наличии по меньшей мере 2 слайдов.
  • Подходит только для каруселей с типом type=slides.
Если для атрибута не задано значение, то он:
  • Добавляет атрибут loop в компонент amp-carousel, если его ещё там нет.
  • Удаляет атрибут loopпосле того, как выполнено заданное число повторов.
delay (необязательно)Указывает интервал перехода к следующему слайду (в миллисекундах), если включен атрибут autoplay. Атрибут delay подходит только для каруселей с типом type=slides.
loop (необязательно)Позволяет пользователю миновать первый или последний элемент. Повторы будут выполняться только при наличии хотя бы трех слайдов. Атрибут loop подходит только для каруселей с типом type=slides. Пример: показ карусели, содержащей слайды, с элементами управления, повторами и задержкой автовоспроизведения
Показать код полностью
common attributesЭтот элемент содержит распространенные атрибуты, которые поддерживаются компонентами AMP.

Поддержка стилей

  • Настраивать стиль элемента amp-carousel можно с помощью селектора этого элемента.
  • Для таргетинга элементов карусели можно использовать селектор класса .amp-carousel-slide.
  • Если кнопка, связанная с компонентом amp-carousel, отключена, ее визуальное состояние скрыто.
  • В элементе .amp-carousel-button используется специальный встроенный файл SVG по умолчанию, который обеспечивает фоновое изображение кнопок. Вы можете заменить его на собственный файл SVG или изображение (см. пример ниже).

Пример: встроенный файл SVG с элементом .amp-carousel-button, используемый по умолчанию

.amp-carousel-button-prev {
  left: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z" fill="#fff" /></svg>');
}

Пример: замена встроенного файла SVG с элементом .amp-carousel-button, используемого по умолчанию

.amp-carousel-button-prev {
  left: 5%;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M11.56 5.56L10.5 4.5 6 9l4.5 4.5 1.06-1.06L8.12 9z" fill="#fff" /></svg>');
}

Валидация

С правилами для компонента amp-carousel можно ознакомиться в спецификации валидатора AMP.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub