Компонент amp-carousel

Примечание. Этот компонент можно использовать только в объявлениях AMPHTML.

Компонент amp-carousel используется для создания круговой галереи с несколькими изображениями. Можно настраивать внешний вид и поведение круговой галереи, изменяя ее свойства.

Пример отображения компонента amp-carousel

Как использовать в проекте компонент amp-carousel

1. Откройте панель Компоненты, а затем – папку Галереи.

2. Перетащите компонент amp-carousel в рабочую область.

3. Введите название компонента amp-carousel в соответствующем разделе панели Свойства.

4. Добавьте изображения в галерею в соответствующем поле, выполнив одно из следующих действий:

   • Нажмите кнопку Выберите изображения для галереи . Затем воспользуйтесь функцией Выбрать изображения или перетащите изображения прямо в диалоговое окно.
   • Введите список URL изображений через запятую.

5. При необходимости настройте описанные ниже свойства компонента.

Режим просмотра кода

В режиме просмотра кода компонент amp-carousel указывает изображения, полученные из свойства Изображения, в специальном атрибуте Google Web Designer images, а не добавляет их в виде дочерних элементов. В остальном исходный код компонента должен соответствовать официальной спецификации (опубликованный файл будет полностью ей соответствовать).

Как удалить изображения из круговой галереи или изменить их порядок

1. В разделе amp-carousel на панели Свойства нажмите кнопку Выберите изображения для галереи . Откроется диалоговое окно со списком изображений в карусели.
2. Чтобы изменить порядок изображений, перетащите их. Чтобы удалить изображение из галереи, наведите на него указатель и нажмите значок Удалить изображение .
3. Нажмите ОК.

Свойства

Изменение внешнего вида и поведения компонента amp-carousel на панели "Свойства".

Свойство	Описание
Название	Имя компонента amp-carousel.
Изображения	URL изображений, отображаемых в круговой галерее.
Тип	Тип отображения: круговая: все слайды отображаются непрерывной полосой и прокручиваются по горизонтали. слайды: отображается один слайд за раз.
Автовоспроизведение	Применяется, только если выбран тип слайды. Если этот флажок установлен, переход к следующему изображению в круговой галерее выполняется автоматически без взаимодействия с пользователем. Чтобы автовоспроизведение работало, в галерее должно быть не менее трех слайдов.
Задержка	Применяется, только если выбран тип слайды и включено автовоспроизведение. Временной интервал перехода между слайдами (в миллисекундах). Задержка по умолчанию – 5000 миллисекунд (5 секунд).
Показать элементы управления	Если этот флажок установлен, на мобильных устройствах отображаются стрелки влево и вправо, чтобы пользователь мог перемещаться по круговой галерее. На компьютерах стрелки всегда отображаются для галерей с несколькими элементами.
Повтор	Применяется, только если выбран тип слайды. Если этот флажок установлен, галерея будет повторно воспроизводиться до первого или последнего слайда (противоположного конца галереи). Чтобы повтор работал, в галерее должно быть не менее трех слайдов.

События и действия

События, отправляемые компонентом amp-carousel

Перечисленные ниже события компонента amp-carousel могут инициировать другие действия.

Событие	Описание
Смена слайда	Отправляется при смене отображаемого слайда.

Чтобы выбрать одно из этих событий в диалоговом окне Событие, установите компонент amp-carousel как цель.

Действия, выполняемые компонентом amp-carousel

Другие события могут вызывать следующие действия в компоненте amp-carousel:

Действие	Параметры настройки
Переход к слайду	Индекс – слайд для перехода, первый слайд обозначен как 0.

Выбрав одно из этих действий в диалоговом окне Событие, установите компонент amp-carousel как получатель.

Подробнее о том, как настраивать события…

Предварительный просмотр

Этот компонент нельзя просмотреть в интерфейсе Google Web Designer. Чтобы увидеть компонент в действии, просмотрите документ в предпочитаемом браузере, нажав кнопку Предварительный просмотр в правом верхнем углу окна.