Slider

Компонент карусели для показа последовательности избранных элементов.

Введение

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

Он использует тот же общий для всех компонентов механизм, описанный в разделах Обзор и Типы компонентов.

Поля Slider

Помимо общих полей (Тип, Порядок, Режим редактирования, Инвертировать фон), Slider имеет:

Поле	Описание
Заголовок (title)	Заголовок блока слайдера.
Содержимое (content / html_content)	Вводный текст блока.
Изображение (image)	Изображение, связанное с самим слайдером (не с элементами).
Alt-текст изображения (image_alt)	Альтернативный текст изображения.
Заголовок изображения (image_title)	Атрибут title изображения.

Элементы

Каждый элемент принадлежит Slider (page_slider_id) и является одним из «слайдов» карусели:

Поле	Описание
Заголовок (title)	Заголовок слайда.
Содержимое (content / html_content)	Текст слайда.
Изображение (image)	Фоновое изображение слайда.
Alt-текст изображения (image_alt)	Альтернативный текст изображения.
Заголовок изображения (image_title)	Атрибут title изображения.
Порядок (sorter)	Позиция слайда внутри карусели.
Действия	Каждый элемент может иметь собственные связанные действия — см. Действия.

Отличие от списка

В отличие от элемента списка, элемент Slider имеет собственные действия, связанные индивидуально (page_slider_item_action) — каждый слайд может иметь свою собственную кнопку/ссылку.

Структура рендеринга

Как и в случае со списком, Item слайдера находится внутри папки типа, а не как соседняя папка:

website/src/components/Slider/
├── index.jsx              # маршрутизатор: выбирает тип слайдера
└── Default/
    ├── index.jsx           # макет слайдера, собирает карусель с <Item />
    ├── info.json
    ├── config.json
    └── Item/
        └── index.jsx        # каждый слайд, включая его собственные действия

Доступные типы

Сейчас существует только тип Стандартный (Default). Чтобы создать новый тип Slider (с собственным Item), следуйте тому же процессу, описанному в разделе Типы компонентов, не забыв включить подпапку Item/ в новый тип.

Следующий шаг

Переходите к разделу Функциональность.