8.7 KiB
Слайдеры
Модуль sliders хранит слайдеры и слайды в собственных таблицах. Для баннера
не нужно создавать рубрику или служебный документ: в документах и списках
редактора остаётся только настоящий контент сайта.
Быстрый запуск
- Откройте Модули → Слайдеры и нажмите Создать слайдер.
- Укажите понятное название и постоянный системный код, например
main. - Сохраните слайдер. Откроется его отдельная страница со вкладками «Слайды» и «Настройки слайдера».
- Для каждого слайда настройте текст, ссылки, кнопки, положение и затемнение.
- Расставьте слайды перетаскиванием за маркер слева.
- Скопируйте тег и вставьте его в шаблон, блок или содержимое документа:
[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 не требует.