Telegram

Мультi Карусель

Joomla-4
Мульти Карусель 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 у перевизначеннi модуля 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 (ваше число)

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

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