«Слайдер» - это слайд-шоу для отображения на экране 1-го слайда из серии содержимого, созданный на основе CSS 3D-трансформаций и немного на JavaScript. Он работает с текстом, изображениями или обычной разметкой.
Bootstrap называет этот компонент Карусель (селектором запуска является carousel). Хотя по своим характеристикам Слайдер и Карусель существенно отличаются. Карусель - это показ нескольких слайдов на экране. Но в Bootstrap существует только Слайдер. Разработчики отказались делать Карусель, потому что в мобильном варианте она бесполезна. Но можно кастомизировать скрипт carousel. В этой статье рассматриваем Слайдер. А здесь написал про Карусель.
Функционал слайдера joomla-4
Навигация: кнопки “вперед/назад”, стрелки клавиатуры, свайп на мобильнике.
Анимация: по умолчанию slide. Изменить на плавный переход fade - добавить в разметку класс carousel-fade
Автоматическая смена слайдов: добавить класс data-bs-interval="3000" (3 секунды)
Контент: можно добавить любой контент в формате html-code, он отобразиться поверх изображения, для этого добавьте класс carousel-caption и вставьте необходимое:
- Заголовок
- Описание
- Кнопки-ссылки
Бывает так, что текст в слайдере слишком большой, и он расползается в мобильнике. Его можно скрыть полностью или частично. Добавьте к нужному элементу два класса d-none и d-md-block, по имени класса понятно, что они делают - первый скрывает текст на малых экранах, а второй показывает на больших.
1 пример, включены все аттрибуты:
интервал смены слайдов 3 сек; анимация fade; навигация полная;
текст - Заголовок, Описание, Кнопка;
скрытие всего текста - в мобильнике на 1-ом слайде;
скрытие описания - в мобильнике на 2-м слайде
2 пример:
смены слайдов нет; анимация slide; навигация Кнопки внизу; текст - Заголовок, Описание, Кнопка
3 пример:
смены слайдов нет; анимация slide; навигация Стрелки сбоку; текст - Заголовок, Описание, Кнопка
Слайдер уже установлен в ядро joomla-4, нужно всего лишь добавить код в статью или модуль. Сделать это очень легко, описание на странице Конструктор элементов и в скаченном архиве.