7.2 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 не требует.