Обзор Regular Labs Sliders Free. Слайдер/аккордеон для Joomla

• Видео урок.
• Основные возможности и особенности.
• Сравнение плагинов.
• Настройки.
• Вставка аккордеона в Joomla.

Regular Labs Sliders Free – бесплатный русскоязычный системный плагин Joomla для создания слайдеров/аккордеонов внутри материалов, модулей, сторонних компонентов и в любом месте, где можно вставить текст.

Видео урок

• Настройки плагина – 00:00:57.
• Вставка аккордеона – 00:04:21.
• Цвета слайдов – 00:06:13.
• Иконка заголовка – 00:06:44.
• Разный текст заголовка – 00:07:06.
• Вложенные слайдеры – 00:07:39.

Ссылки из видео:

• Regular Labs Tabs Free.
• Примеры настройки плагина.

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.

Внутри слайдера можно размещать всё, что можно размещать внутри текстового редактора Joomla (рисунок ниже). Плагин прост в установке, настройке и использовании. Он очень похож на плагин Regular Labs Tabs Free. Также в самой Джумла есть плагин, который позволяет создавать вкладки и аккордеон в материалах. Слайдер (на англ. – «slider») ещё называют «аккордеон» (на англ. – «accordion»).

Пример слайдеров, созданных при помощи платной и бесплатной версии плагина Regular Labs Sliders, можно посмотреть на официальном сайте разработчика.

Под «слайдер» я понимаю совокупность отдельных слайдов, а под «слайд» – часть слайдера.

В обзоре участвует последняя, на момент написания статьи (24.10.2019), русскоязычная версия Regular Labs Sliders Free 7.7.8 в Joomla 3.9.12. Демонстрационный сайт на английском языке с шаблоном JM Services.

На официальном сайте расширений Joomla 93 отзыва, расширение добавлено 18 ноября 2014 года.

• Общий рейтинг – 5 из 5.
• Функциональность – 5 из 5.
• Простота использования – 5 из 5.
• Поддержка – 5 из 5.
• Документация – 5 из 5.

Также есть платная версия Regular Labs Sliders Pro – €19. Она обладает более расширенным набором опций. Об отличиях платной и бесплатной версий можно прочесть ниже в статье.

Основные возможности и особенности

• Поддержка актуальной версии Joomla.
• Основан на Bootstrap 2 и jQuery. Есть возможность использования встроенного Bootstrap и jQuery.
• Создание слайдеров внутри материалов, модулей, сторонних компонентов и в любом месте, где можно вставить текст.
• Внутри каждого слайда можно поместить всё, что можно поместить внутри текстового редактора Joomla (рисунок ниже).

• Настройки стилей без правки CSS.
• Наличие CSS классов у всех элементов аккордеона для изменения внешнего вида при помощи правки стилей.
• Открытие слайда по нажатию на заголовок.
• Возможность смены тега заголовка слайда (H1-H6).
• Возможность создания якорей для ссылок, чтобы можно было переходить по ссылкам сразу к нужному слайду.
• Возможность задать отложенную инициализацию плагина аккордеона. Полезно, если есть конфликт с другими расширениями.
• Можно использовать в админке Joomla.
• Наличие кнопки вставки слайдов в текстовый редактор Joomla (рисунок ниже).
• Возможность изменения тегов для вставки слайдов. Полезно, если другой плагин уже использует такие же теги.
• Переведён на русский, английский, нидерландский, испанский, итальянский и другие языки.
• Хорошая документация на английском языке.

Сравнение плагинов

Настройки

Все настройки плагина аккордеона Joomla разделены на шесть вкладок (рисунок ниже).

1. Плагин. Содержит краткую инструкцию по вставке слайдов и опции, позволяющие включить/отключить плагин, а также другие стандартные, для всех плагинов Джумла, настройки.
2. Оформление. Позволяет активировать применение встроенных в плагин стилей (опция Загружать стили), задать собственный CSS класс для написания индивидуальных стилей слайдов (опция Основной класс) (рисунок ниже).
3. Поведение. Позволяет задать состояние первого слайда по умолчанию – открыт или закрыт.
4. Настройки кнопки редактора. Тут Вы можете сконфигурировать кнопку вставки слайдов, расположенной в текстовом редакторе. Немного подробнее о ней мы поговорим ниже в статье. Плюс, в видео-обзоре показан пример вставки слайдов в материал при помощи этой кнопки.
5. Синтаксис тегов.
6. Дополнительные параметры.

Вкладка Настройки кнопки редактора (рисунок ниже). Тут Вы можете сконфигурировать кнопку вставки слайдов, расположенной в текстовом редакторе. Немного подробнее о ней мы поговорим ниже в статье. Плюс, в видео-обзоре показан пример вставки слайдов в материал при помощи этой кнопки.

Вкладка Синтаксис тегов (рисунок ниже). Позволяет изменить открывающий, закрывающий теги и скобки тегов, которые используются для вставки вкладок в редактор. Полезно, когда другой плагин использует этот же тег.

Вкладка Дополнительные параметры (рисунок ниже). Содержит дополнительные опции, позволяющее более тонко настроить табы Joomla.

• Тег заголовка. Позволяет изменить тег заголовка слайда (H1-H6). Может быть полезно для SEO.
• Использовать #-нотацию. Позволяет создавать якоря для перехода к нужному слайду. Например, можно создать ссылку вида «https://site.com/slajdy#slajd-3». По её нажатию пользователь перейдёт на страницу с аккордеоном и перед ним сразу откроется нужный слайд.
• Задержка инициализации. Установите задержку в миллисекундах для инициализации скрипта плагина Regular Labs Sliders после загрузки страницы. Вы можете использовать это для инициализации слайдов после других скриптов, для которых это нужно, чтобы корректно работать.
• Загрузить Bootstrap Framework. Для нормального функционирования плагина Joomla Sliders необходим фреймворк Bootstrap. Если Ваш шаблон, или другое расширение, уже загружает данный фреймворк, то можно отключить эту опцию.

Вставка аккордеона в Joomla

Рассмотрим добавление слайдера на примере материала Joomla. Но процесс аналогичен и для вставки слайдеров в модули и другие компоненты. Предполагается, что плагин Вы уже установили и настроили.

Шаг 1. В редакторе материалов нажмите на кнопку Sliders.

Шаг 2. В появившемся окне (рисунок ниже) укажите заголовок для слайда и измените его настройки, если это нужно. Если Вам нужно три слайда, то укажите заголовки для трёх слайдов. Если пять, то для пяти. Если Вам нужно 11 и более слайдов, то это можно сделать на следующем шаге. Обратите внимание, что опции, которые Вы задаёте для каждого слайда отдельно, переопределяют аналогично опции, заданные в плагине.

Нажмите кнопку Вставить для вставки тегов аккордеона.

Шаг 3. После вставки тегов замените текст «Ваш текст...» на содержимое для каждого слайда.

Если нужно добавить больше слайдов, то скопируйте тег слайда, в моём примере это «{slider Слайд 5}» и вставьте его перед тегом «{/sliders}». Замените заголовок «Слайд 5» на другой и поместите содержимое слайда после тега так же, как Вы делали для других слайдов.

Рассмотрим несколько вариантов настроек слайдера Joomla.

Цвета слайдов. Можно задавать разные цвета всем или отдельным слайдам. Пример тегов:

{slider Слайд 1}
Текст слайда №1
{slider title="Слайд 2" class="blue"}
Текст слайда №2
{slider title="Слайд 3" class="green"}
Текст слайда №3
{slider title="Слайд 4" class="orange"}
Текст слайда №4
{slider title="Слайд 5" class="red"}
Текст слайда №5
{slider title="Слайд 6" class="grey"}
Текст слайда №6
{/sliders}

Результат на сайте (рисунок ниже).

Слайды с форматированием заголовка и с изображением в заголовке. Можно задавать форматирование заголовкам и вставлять изображения в них. Пример тегов:

{slider <em><strong>Слайд 1</strong></em>}
Текст слайда №1
{slider <img src="/images/joomla_logo_black.jpg" alt="" width="148" height="30" /> Слайд 2}
Текст слайда №2
{slider Слайд 3}
Текст слайда №3
{/sliders}

Пример тегов в редакторе (рисунок ниже).

В результате будет так, как показано на рисунке ниже.

Меняющиеся иконки в заголовках. Можно отобразить иконку «+» для закрытых слайдов и «-» для открытых. Пример тегов:

{slider title="Слайд 1" class="icon"}
Текст слайда №1
{slider title="Слайд 2" class="icon"}
Текст слайда №2
{/sliders}

В результате будет так, как показано на рисунке ниже.

Меняющийся текст в заголовке. Можно отобразить разный текст для закрытых и открытых слайдов. Пример тегов:

{slider title="Слайд закрыт" title-opened="Слайд открыт"}
Текст слайда №1
{slider title="Слайд закрыт" title-opened="Слайд открыт"}
Текст слайда №2
{/sliders}

В результате будет так, как показано на рисунке ниже.

Открытый, по умолчанию, слайд. Можно задать, какой слайд будет открыт по умолчанию. Пример тегов:

{slider Слайд 1}
Текст слайда №1
{slider title="Слайд открыт по умолчанию" open="true"}
Текст слайда №2
{slider Слайд 3}
Текст слайда №3
{/sliders}

В результате будет так, как показано на рисунке ниже.

Вложенные друг в друга слайдеры. Можно размещать слайдеры внутри друг друга. Пример тегов:

{slider Пример}
    Текст слайда
    {slider-ex Слайд 1}
        Текст слайда 1
        {slider-ex_sub1 Слайд 1.1}
            {slider-ex_sub1_sub1 Слайд 1.1.1}
                Текст слайда 1.1.1
            {slider-ex_sub1_sub1 Слайд 1.1.2}
                Текст слайда 1.1.2
            {slider-ex_sub1_sub1 Слайд 1.1.3}
                Текст слайда 1.1.3
            {/sliders-ex_sub1_sub1}
        {slider-ex_sub1 Слайд 1.2}
            Текст слайда 1.2
        {/sliders-ex_sub1}
    {slider-ex Слайд 2}
        Текст слайда 2
        {slider-ex_sub2 Слайд 2.1}
            Текст слайда 2.1
        {slider-ex_sub2 Слайд 2.2}
            Текст слайда 2.2
        {/sliders-ex-sub2}
    {/sliders-ex}
{/sliders}

В результате будет так, как показано на рисунке ниже.

Больше информации и примеров настройки слайдов можно найти в документации разработчика (на английском).

Как видите, данный плагин достаточно прост в использовании и позволяет буквально в несколько нажатий создать аккордеон на Вашем сайте. Обладая базовыми навыками CSS можно изменить стили слайдов под дизайн своего сайта. Если у Вас есть вопросы, задавайте их в комментариях.

Автор статьи – Хорошевский Алексей

Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Контакты: +38 095 840 24 29 +38 095 840 24 29 +38 095 840 24 29 email@aleksius.com Социальные сети: LinkedIn Facebook YouTube (Twitter) Публикации и работа: Google Академия Scopus Upwork Freelance.ua

Полезные ссылки:

• Официальный сайт.