Карусель - это показ нескольких слайдов на экране из серии содержимого. Multi Carousel создан на основе скрипта Bootstrap.carousel. Незаменимая вещь для демонстрации товаров в интернет магазине.
В ядре joomla-4 установлен скрипт Bootstrap для показа слайдов - 1 слайд на экране. К разработчикам много раз обращались различные веб-мастера, чтобы они создали мультислайдовую карусель. Однако Bootstrap ответил, что они не будут этого делать, потому что изначально Bootstrap разрабатывался под смартфоны, и на маленьких экранах все элементы располагаются в одну колонку. А кто хочет, может самостоятельно доработать их скрипт.
Побродив по интернету, я нашел всего 2 скрипта модернизированной карусели для Bootstrap-5. Такое малое количество объяснятся тем, что joomla-4 использует чистый скрипт, без зависимостей и сторонних библиотек. Каруселей jQuery очень много, а вот чистых "ванильных" практически нет.
У карусели есть два функционала:
- Одна карусель перелистывает весь фрэйм сразу: на экране 3 картинки в ряд, нажимаешь кнопку влево/вправо и появляются следующие 3 картинки. Это не очень хорошо. Я хочу, чтобы картинки двигались по одной.
- Другая карусель листает по одной картинке, как раз то что надо!
Теперь надо подключить скрипт и установить данные в модуль joomla-4. При установке появился баг, пришлось подкорректировать скрипт и стили css, чтобы работало правильно.
Подключение карусели
Для того, чтобы карусель заработала, необходимо подключить несколько файлов - вызвать скрипт Bootstrap.carousel, добавить маленький скрипт мульти-карусели, который вносит изменение в Bootstrap.carousel, и добавить стили.
- Я создал файл
carousel.phpпереопределение модуля HTML в папкуcassiopeia/html/mod_custom - Загрузил скрипт
multi-carousel.jsв ту же папку. - Добавил стили в файл
custom.css
Создание карусели
- Создать модуль HTML
- Вставить код карусели: нажать в редакторе кнопку "Вставить шаблон" и выбрать из списка
Multi-Carousel - Заменить изображение и текст на свое.
- Нажать вкладку Дополнительные параметра и выбрать макет
carousel - Выбрать позицию и меню, куда вы хотите вывести модуль.
- Сохранить модуль.
Настраиваемые элементы карусели
- Нижнюю навигацию (кнопки) можно убрать - просто удалите блок
<div class="carousel-indicators">....</div>из HTML. - Блок стрелок вперед/назад можно переместить вверх карусели - изменить стили
css - Количество картинок в ряду меняется в файле
multi-carousel.jsв строкеconst minPerSlide = 4(ваше число)
Примечание: Навигация (перелистывание) происходит только стрелками и кнопками. Свайпа в смартфоне нет. Разработчики это объясняют надежностью юзабилити: перелистывая свайпом карусель товаров, вы случайно можете нажимать картинку товара, которая является ссылкой и сразу перейдете на другую страницу. А листая кнопками, вы всегда просмотрите всю карусель.
В архиве для скачивания есть все файлы и инструкция по установке
