Компонент позволяет отображать серии изображений (слайдов) в боксе. Каждое изображение (слайд) демонстрируется несколько секунд, пока не сменится следующим. Слайды переключаются стрелками влево и вправо, а также нажатием на маркер слайда в центре бокса. Ниже изображений отображается подпись.
Пример использования карусели.
Карусель можно встраивать в markdown-разметку с помощью пользовательского макрокода (shortcode) с указанием аргументов:
{{< carousel data-file-name="graduates-2022" items="1" full-height="515" height="425" unit="px" duration="4000" >}}
Аргументы макрокода:
data-file-name
— наименование YAML-файла с данными для карусели из директории data, о заполнении YAML-файла см. ниже;items
— количество слайдов для одновременного отображения (желательно использовать только значение1
);full-height
— высота компонента с учётом подписи (желательное значение —515
);;height
— высота изображения внутри компонента (должна быть меньше значенияfull-height
, желательное значение —425
);unit
— единицы измерения для указания высоты (желательное значение —px
);duration
— время демонстрации слайда в миллисекундах.
YAML-файл следует располагать в корневой директории data
.
Файл состоит из массива images
, в котором хранятся элементы с следующими полями:
image
— ссылка на файл изображения;content_text
— подпись к изображению.
Пример:
images:
- image: /static/images/1.png
content_text: "Подпись к первому изображению"
- image: 2.png
content_text: "Подпись к второму изображению"
/static/images/1.png
— аболютный путь;2.png
— файл в локальной папке.
- Желательно не использовать более семи элементов в одной карусели, это замедлит показ картинок.
- Картинки желательно сжать для ускорения просмотра, использовать формат WebP.
Компонент позволяет отображать серии изображений (слайдов) в боксе. Каждое изображение (слайд) демонстрируется несколько секунд, пока не сменится следующим. Слайды переключаются стрелками влево и вправо, каждое изображение сопровождается кнопкой со ссылкой.
Аналогично карусели.
{{< banner-carousel data-file-name="banners" items="1" height="450" unit="px" duration="4000" >}}
Аргументы макрокода:
data-file-name
— наименование YAML-файла с данными для карусели из директории data, о заполнении YAML-файла см. ниже;items
— количество слайдов для одновременного отображения (желательно использовать только значение1
);height
— высота изображения внутри компонента (должна быть меньше значенияfull-height
, желательное значение —450
);unit
— единицы измерения для указания высоты (желательное значение —px
);duration
— время демонстрации слайда в миллисекундах.
YAML-файл следует располагать в корневой директории data
.
Файл состоит из массива images
, в котором хранятся элементы с следующими полями:
image
— ссылка на файл изображения;content_link
— ссылка в кпопке.content_text
— надпись в кпопке.
Пример:
images:
- image: /images/index-banners/1.jpg
content_link: "/blog/graduates-2022/"
content_text: "Выпускники 2022 года"