Карусель мульти слайд carousel joomla 4

Карусель - это показ нескольких слайдов на экране из серии содержимого. 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, и добавить стили.

  1. Я создал файл carousel.php переопределение модуля HTML в папку cassiopeia/html/mod_custom
  2. Загрузил скрипт multi-carousel.js в ту же папку.
  3. Добавил стили в файл custom.css

Создание карусели

  1. Создать модуль HTML
  2. Вставить код карусели: нажать в редакторе кнопку "Вставить шаблон" и выбрать из списка Multi-Carousel
  3. Заменить изображение и текст на свое.
  4. Нажать вкладку Дополнительные параметра и выбрать макет carousel
  5. Выбрать позицию и меню, куда вы хотите вывести модуль.
  6. Сохранить модуль.

Настраиваемые элементы карусели

  1. Нижнюю навигацию (кнопки) можно убрать - просто удалите блок <div class="carousel-indicators">....</div> из HTML.
  2. Блок стрелок вперед/назад можно переместить вверх карусели - изменить стили css
  3. Количество картинок в ряду меняется в файле multi-carousel.js в строке const minPerSlide = 4 (ваше число)

Примечание: Навигация (перелистывание) происходит только стрелками и кнопками. Свайпа в смартфоне нет. Разработчики это объясняют надежностью юзабилити: перелистывая свайпом карусель товаров, вы случайно можете нажимать картинку товара, которая является ссылкой и сразу перейдете на другую страницу. А листая кнопками, вы всегда просмотрите всю карусель.

В архиве для скачивания есть все файлы и инструкция по установке

 

💬 Нет комментариев