Тип компонента Галерея-слайдер

Что это за компонент

Галерея-слайдер - это компонент, который показывает несколько визуальных карточек в одной горизонтальной ленте.

Если говорить совсем просто, это прокручиваемая подборка слайдов, где каждый слайд может содержать:

• изображение
• подпись
• фон
• ссылку для перехода

Такой блок помогает компактно показать несколько предложений, категорий, подборок или направлений внутри одной области экрана.

Когда использовать именно этот тип

Галерея-слайдер подходит, если нужно:

• показать несколько направлений в одном блоке
• вывести подборку категорий
• сделать визуальную навигацию по разделам
• оформить короткую линейку акций или тематических подборок
• дать клиенту возможность быстро перелистывать карточки

Этот тип особенно удобен там, где одного баннера недостаточно, а длинный список подряд занимал бы слишком много места на экране.

Как этот блок выглядит в Omnis и в mini app

Рабочая логика простая:

1. В Omnis создается компонент типа Галерея-слайдер.
2. В карточке компонента заполняется общий заголовок галереи.
3. Ниже добавляются отдельные слайды.
4. Для каждого слайда можно задать изображение, подпись, фон и ссылку.
5. После сохранения компонент размещается на нужной странице.
6. В mini app клиент видит горизонтальную галерею карточек и перелистывает ее свайпом.

1. Как создать компонент Галерея-слайдер

Обычно сценарий такой:

1. Откройте Управление -> CMS -> Компоненты.
2. Нажмите Создать.
3. В окне выбора типа выберите Галерея-слайдер.
4. Заполните название компонента.
5. При необходимости задайте код.
6. Заполните общий заголовок галереи.
7. Нажмите Новый слайд.
8. Заполните поля первого слайда.
9. При необходимости добавьте еще слайды.
10. Сохраните компонент.
11. Разместите его в нужном слоте страницы.

2. Основные поля карточки

Сверху у Галереи-слайдера используются стандартные поля CMS-компонента.

ID

Это внутренний идентификатор записи. В обычной работе он нужен редко.

Тип

Для этого документа тип всегда будет Галерея-слайдер.

Он определяет:

• состав полей компонента
• вид блока у клиента
• набор собственных настраиваемых свойств

Код

Это служебный код компонента.

Если код не заполнен вручную, система обычно формирует его сама после сохранения.

Наименование

Это рабочее название галереи в Omnis.

Лучше использовать понятные названия, например:

• Галерея категорий на главной
• Слайдер акций
• Подборки сезона
• Навигация по разделам

Приоритет

Это служебный параметр порядка. Он помогает контролировать положение компонента среди других блоков страницы.

Активирован

Этот переключатель помогает:

• включать рабочую галерею
• хранить черновики
• временно скрывать блок без удаления

3. Общие поля самой галереи

Ниже основных полей находится область настройки самой галереи.

У нее есть одно основное поле верхнего уровня и список слайдов.

Заголовок

Это общий заголовок всего блока, который показывается над галереей.

Он помогает клиенту понять, что именно находится в подборке. Например:

• Популярные категории
• Подборки для вас
• Актуальные акции
• С чего начать

Практический совет:

• делайте заголовок коротким и ясным
• лучше использовать 2-5 слов
• если заголовок не нужен, поле можно оставить пустым

Новый слайд

Это кнопка добавления новой карточки в галерею.

После нажатия появляется новая запись с полями конкретного слайда.

Если в галерее нужно несколько карточек, их создают именно через эту кнопку.

4. Как устроен каждый слайд

Каждый слайд в галерее настраивается отдельно.

Внутри одного компонента можно собрать несколько разных карточек, и каждая из них будет иметь собственное изображение, подпись, фон и ссылку.

Изменение порядка слайдов

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

Это полезно, если нужно:

• поставить наиболее важную карточку первой
• изменить порядок акций
• собрать новую последовательность разделов

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

Удаление слайда

У каждого слайда есть кнопка удаления.

Ее используют, если карточка больше не нужна или была создана по ошибке.

Перед удалением полезно проверить, не ведет ли этот слайд на важный рабочий раздел.

5. Все поля отдельного слайда

У каждого слайда есть собственный набор полей.

Наименование

Это короткая подпись слайда.

Именно ее клиент обычно видит поверх изображения или в нижней части карточки.

Хорошие примеры:

• Новинки
• Распродажа
• Для дома
• Подарки

Практически важно:

• делать подпись короткой
• не перегружать ее длинной фразой
• учитывать, что на экране телефона длинный текст обрезается
• если нужен максимально чистый визуальный слайд без подписи, поле можно оставить пустым

Фон

Это цвет фона карточки.

Он особенно полезен в таких случаях:

• когда изображение имеет прозрачные области
• когда нужно поддержать фирменные цвета
• когда важно, чтобы карточка выглядела аккуратно даже до загрузки изображения

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

URL

Это адрес перехода по конкретному слайду.

Если клиент нажимает на карточку, система открывает именно этот адрес.

Сюда можно указывать:

• внутреннюю страницу приложения
• каталог
• подборку
• раздел витрины
• внешний ресурс, если это предусмотрено вашим сценарием

Если поле URL оставить пустым, слайд останется видимым, но переход по нему работать не будет.

Контент

Это дополнительное текстовое поле слайда.

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

Поэтому на практике поле обычно заполняют только тогда, когда внутри компании есть договоренность использовать его в особом сценарии оформления. Если не уверены, это поле лучше оставить пустым.

Описание

Это еще одно дополнительное текстовое поле слайда.

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

Если у вас нет отдельного согласованного сценария для этого поля, его можно не заполнять.

Изображение

Это главное изображение карточки.

Именно оно делает галерею визуальной и заметной.

Практически полезно:

• использовать изображения в едином стиле
• подбирать картинки, которые хорошо смотрятся на телефоне
• следить, чтобы подпись не терялась на фоне изображения
• для одной галереи лучше выбирать изображения примерно одного настроения и формата

6. Как Галерея-слайдер выглядит у клиента

В mini app этот компонент отображается как горизонтальная карусель карточек.

Клиент может:

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

Что обычно видно в карточке

В стандартном виде клиент обычно видит:

• изображение
• подпись слайда, если она заполнена

Если подпись не заполнена, карточка выглядит более лаконично и визуально опирается только на изображение.

В компактном режиме это особенно заметно: карточка выглядит как небольшая визуальная плитка без текстового акцента.

Как работает переход по слайду

Когда клиент нажимает на карточку:

• система берет адрес из поля URL
• если адрес заполнен, выполняется переход
• если адрес пустой, карточка остается без действия

Индикатор перелистывания

У стандартного варианта галереи под слайдами показывается индикатор, который помогает понять, что карточек несколько и их можно листать.

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

7. Общие настраиваемые свойства компонента

Как и у других компонентов, у Галереи-слайдера действуют общие свойства блока.

Чаще всего здесь могут пригодиться:

• padding-y - внутренние отступы сверху и снизу
• padding-x - внутренние отступы слева и справа
• margin-y - внешние отступы сверху и снизу
• margin-x - внешние отступы слева и справа

Практически это помогает:

• отделить галерею от соседних блоков
• сделать экран более аккуратным
• дать карточкам больше воздуха

Если не уверены, эти свойства лучше менять аккуратно и после визуальной проверки на телефоне.

8. Собственные настраиваемые свойства Галереи-слайдера

У Галереи-слайдера есть собственные настраиваемые свойства, которые отвечают именно за внешний вид заголовка, карточек и режима показа.

Режим отображения галереи

• skin - режим отображения галереи

Практически здесь используется два подхода:

• пустое значение или стандартный режим - более широкие карточки и индикатор перелистывания
• compact - более компактные карточки, которые выглядят как короткая лента небольших плиток

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

Компактный режим удобен, если:

• нужно показать больше карточек в одной строке
• галерея используется как быстрый визуальный навигатор
• на странице уже много крупных блоков и галерею хочется сделать легче

Заголовок галереи

• color-title - цвет заголовка галереи
• size-title - размер текста заголовка
• weight-title - насыщенность текста заголовка

Эти свойства помогают сделать заголовок:

• более заметным
• более спокойным
• ближе к фирменному стилю вашей витрины

Если заголовок должен быть главным акцентом блока, обычно его делают крупнее и насыщеннее.

Подпись на карточке

• color-slide-name - цвет подписи слайда
• color-bg-slide-name - фон под подписью слайда
• size-slide-name - размер текста подписи

Это важные свойства для читаемости.

Они помогают:

• сделать подпись заметной на ярком изображении
• усилить контраст
• не дать тексту потеряться на фоне фотографии

Практический совет:

если картинки очень разные по цвету и яркости, лучше отдельно проверить, читается ли подпись на всех слайдах.

Размер и форма карточек

• height-slider - высота галереи
• min-width-slide - минимальная ширина карточки
• max-width-slide - максимальная ширина карточки
• round-slide - скругление углов карточки

Эти свойства влияют на общее восприятие галереи.

С их помощью можно сделать блок:

• более крупным и выразительным
• более компактным
• более мягким по форме
• более строгим и геометричным

Практически это означает следующее:

• большая высота делает карточки визуально богаче
• меньшая ширина позволяет показать больше карточек сразу
• сильное скругление делает галерею мягче и дружелюбнее
• более прямые углы делают блок строже

9. Практические рекомендации по настройке

Чтобы Галерея-слайдер выглядела аккуратно и была понятна клиенту, полезно придерживаться нескольких правил.

Делайте подписи короткими

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

Не делайте все карточки слишком разными

Если в одной галерее смешать изображения совершенно разного стиля, блок может выглядеть хаотично. Лучше, когда слайды собраны в одном визуальном настроении.

Проверяйте, куда ведет каждый слайд

Если клиент видит красивую карточку, но переход по ней не работает, это создает плохой опыт. Перед публикацией полезно открыть каждый слайд и проверить URL.

Осторожно используйте Контент и Описание

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

Проверяйте результат на телефоне

Галерея-слайдер всегда лучше оценивать на реальном мобильном экране:

• насколько удобно листать карточки
• читаются ли подписи
• не слишком ли мелкие изображения
• комфортно ли нажимать на нужный слайд