# Слайдеры

← [Назад к разделу «Модули»](README.md)

Модуль `sliders` хранит слайдеры и слайды в собственных таблицах. Для баннера
не нужно создавать рубрику или служебный документ: в документах и списках
редактора остаётся только настоящий контент сайта.

## Быстрый запуск

1. Откройте **Модули → Слайдеры** и нажмите **Создать слайдер**.
2. Укажите понятное название и постоянный системный код, например `main`.
3. Сохраните слайдер и добавьте изображения из общей медиатеки.
4. Для каждого слайда настройте текст, ссылки, кнопки, положение и затемнение.
5. Расставьте слайды перетаскиванием за маркер слева.
6. Скопируйте тег и вставьте его в шаблон, блок или содержимое документа:

```text
[mod_slider:main]
```

Вместо кода разрешён числовой ID: `[mod_slider:3]`. Код удобнее, потому что
остаётся понятным после переноса данных между сайтами.

## Что настраивается у слайдера

| Параметр | Что делает |
| --- | --- |
| Переход | Перемещает соседний слайд или плавно растворяет текущий. |
| Высота | Отдельная высота для больших экранов и телефонов. |
| Ширина текста | Ограничивает рабочую область текста, но не ширину изображения. |
| Автопрокрутка | Меняет слайды через заданный интервал. |
| Длительность | Скорость самого перехода. |
| Бесконечный цикл | После последнего слайда возвращается к первому. |
| Пауза при наведении | Даёт посетителю спокойно прочитать текст и нажать кнопку. |
| Клавиатура и свайп | Переключение стрелками клавиатуры и жестом на телефоне. |
| Стрелки и точки | Независимо показывают или скрывают два вида навигации. |

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

## Что настраивается у слайда

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

Если рядом с JPG или PNG лежит WebP-копия с тем же именем, модуль автоматически
добавляет её в `<picture>` как предпочтительный формат. Браузер, который не
поддерживает WebP, продолжит получать исходный JPG или PNG. Для мобильного
изображения действует то же правило.

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

Текстовый слой состоит из надзаголовка, заголовка и краткого текста. Для него
задаются горизонтальное и вертикальное положение, выравнивание, цвет текста,
акцентный цвет и анимация появления. Цвет и процент затемнения отвечают за
читаемость текста поверх светлой фотографии.

У слайда есть:

- ссылка со всей площади слайда;
- главная и дополнительная кнопки со своими подписями, URL и стилями;
- дата начала и завершения показа;
- выключатель публикации;
- дополнительный CSS-класс для оформления в активной теме.

Адрес для всего слайда и обеих кнопок можно написать вручную либо выбрать
документ кнопкой с иконкой поиска. При выборе документа модуль подставляет его
публичный alias, поэтому редактору не нужно искать и копировать адрес страницы.
Ручной ввод остаётся полезен для внешних сайтов, якорей и специальных ссылок.

Пустая кнопка не выводится. Если дата начала ещё не наступила или дата
завершения прошла, слайд остаётся в панели, но исчезает с публичного сайта.

## Оформление в теме

Модуль выводит устойчивые классы с префиксом `.ave-slider`. Тема может менять
шрифты, размеры, кнопки, стрелки и точки обычным CSS, не переписывая данные или
JavaScript. Индивидуальный класс слайда нужен для редких исключений, например
особого расположения текста в одной рекламной кампании.

Модуль подключает `sliders.css` и `sliders.js` один раз, даже если на странице
вставлено несколько слайдеров. Удаление слайда или всего слайдера удаляет только
его записи; исходные изображения в медиатеке сохраняются.

## Расширение

Hook `sliders.rendering` получает массив `slider` и готовый `html`. Его можно
использовать для проектной интеграции, если стандартных настроек и CSS темы
недостаточно. Обычная настройка слайдера hook не требует.