«Слайдер» - це слайд-шоу для відображення на екрані 1-го слайду із серії вмісту, створений на основі CSS 3D-трансформацій та трохи на JavaScript. Він працює із текстом, зображеннями або звичайною розміткою.
Bootstrap називає цей компонент Карусель (селектором запуску є carousel). Хоча за своїми характеристиками Слайдер та Карусель суттєво відрізняються. Карусель – це показ кількох слайдів на екрані. Але в Bootstrap існує лише Слайдер. Розробники відмовилися робити Карусель, тому що у мобільному варіанті вона марна, там завжди 1 слайд. Але можна кастомізувати скрипт каруселi. Тут розглядаємо Слайдер. А там написав про Карусель.
Функціонал слайдера joomla-4
Навігація: кнопки "вперед/назад", стрілки клавіатури, свайп на мобільному телефоні.
Анімація: за замовчуванням slide. Змінити на плавний перехід - додати в розмітку клас 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, потрібно лише додати код у статтю або модуль. Зробити це дуже легко, опис в архіві.