Обзор лучших модулей и компонентов для реализации слайдеров в Joomla 3. Рассматриваются три бесплатных расширения для создания слайдеров начального уровня, а также три коммерческих расширения, позволяющих создавать слайдеры продвинутого уровня.
Что такое слайдер?
Обычно под слайдером понимается элемент веб-сайта, попеременно отображающий определенный контент следующим образом.
Слайдер состоит из слайдов — отдельных элементов контента, отображаемых в текущий момент времени, а также он может включать другие элементы:
- кнопки пагинации — для отображения определённых слайдов
- кнопки влево/вправо — для перехода к предыдущему/следующему слайду
- миниатюры слайдов
Также слайдеры, как правило, имеют в арсенале ряд настроек, позволяющих устанавливать:
- автоматическую смену слайдов,
- время смены слайдов,
- задержку смены слайдов при наведении курсора,
- анимацию смены слайдов,
- различный контент слайдов,
- и др.
Виды слайдеров в Joomla
Как правило, в Joomla слайдеры создаются в виде отдельных модулей, выводимых в определённых позициях шаблона или в области компонента.
Слайдеры в Joomla могут отображать следующий контент:
- произвольный контент: вы сами определяете содержимое каждого слайда
- материалы компонента: слайды будут содержать некоторую информацию из определённых материалов компонента контента или из какого-либо другого компонента в зависимости от возможностей слайдера
В JED представлено огромное множество подобных расширений в подразделе Slideshow раздела Photos & Images.
Слайдеры начального уровня
Слайдеры начального уровня представляют из себя:
- смену картинок с эффектами,
- добавление текста на слайд в определенном месте,
- вывод содержимого контента и некоторых компонентов.
Подходят для показа галереи, красивых изображений или списка последних материалов.
Среди самых популярных представителей можно выделить:
- DJ-ImageSlider,
- Slideshow CK,
- RokSprocket.
DJ-ImageSlider
Первым на рассмотрении — самое рейтинговое в JED бесплатное расширение DJ-ImageSlider.
Возможности DJ-ImageSlider
Вот так выглядит описание слайдера от разработчика:
DJ-ImageSlider — это бесплатное, адаптивное, готовое к применению на мобильных устройствах с сенсорным экраном расширение, настраиваемое через компонент и модули. Вы можете создавать неограниченное число слайдеров и слайдов, и размещать их в любом месте сайта. Расширение оптимизировано для поисковых систем, использует анимацию CSS3, быстро и легко настраивается в панели управления. Каждый слайд может иметь заголовок, описание и ссылку на статью Joomla, пункт меню или URL-адрес.
Разработчики не соврали: всё вышесказанное присуще данному слайдеру.
Пакет расширения включает компонент и модуль, архив весит всего 110 КБ.
Настройки компонента DJ-ImageSlider
Панель управления компонентом очень проста и имеет всего 2 страницы:
- Категории:
Здесь можно создать категории, к которым можно относить определённые слайды. В дальнейшем при создании модуля можно указывать категорию, из которой потребуется выводить слайды. При создании категории достаточно заполнить заголовок категории — остальные опции не важны.
- Слайды:
Страница создания и редактирования слайда имеет ряд настроек, касающихся отображаемого контента (заголовок, категория, картинка, описание, атрибуты ссылки и изображения).
Настройки модуля DJ-ImageSlider
На странице создания и редактирования модуля во вкладке Модуль содержатся настройки:
- внешнего вида слайдера:
Ширина и высота, количество отображаемых слайдов, расстояние между слайдами и т. д.
- функционала слайдера:
кнопки перехода, автовоспроизведение, зацикливание показов и т. п.
- источника слайдов
компонент или папка с изображениями
Во вкладке Customise Slider можно:
- настроить показ описания слайда
- установить картинки для навигационных кнопок
- определить эффекты анимации и временные интервалы
Вердикт по DJ-ImageSlider
DJ-ImageSlider — лёгкий (архив 110 Кб), простой в использовании, но достаточно функциональный слайдер для Joomla, не содержащий ничего лишнего.
Slideshow CK
Вторым в очереди на рассмотрение стоит модуль Slideshow CK: данное расширение совсем немного отстаёт от предыдущего слайдера по количеству отзывов и совсем не проигрывает по рейтингу.
Несмотря на то, что пакет слайдера включает только модуль, Slideshow CK нельзя назвать простым и легким расширением: дистрибутив весит около 1600 Кб, а сам модуль имеет большое количество настроек.
Основные возможности Slideshow CK
Относительно тяжелый дистрибутив отражает большой набор возможностей модуля:
- неограниченное количество слайдов
- эргономичный интерфейс администрирования с Drag & Drop
- возможность создавать слайды на основе картинок, видео или материалов
- совместимость с сенсорными мобильными устройствами
- адаптивный дизайн
- ссылки и заголовки в слайдах
- возможность вставки HTML-кода в слайды
- настройка порядка отображения слайдов
- миниатюры слайдов и настройка их размеров
- кастомизация внешнего вида слайдера
Может показаться, что нет очевидных преимуществ перед DJ-ImageSlider, но мы их подчеркнём:
- по умолчанию слайдер Slideshow CK смотрится значительно эффектнее
- формирование слайдов из материалов компонента контента
- включение и проигрывание видеороликов в слайдах
- очень большое количество настроек для кастомизации
Дополнительные возможности Slideshow CK
Хотя сам модуль является бесплатным, чтобы задействовать все его возможности, могут понадобиться еще 2 платных расширения:
- Plugin Slideshow CK Params
Позволяет устанавливать дополнительные источники для формирования слайдов, а также открывать ссылку слайда в модальном окне. Подробнее.
- Package theme Default
Пять дополнительных стилей для внешнего вида слайдера. Подробнее.
- плагины интеграции с другими сторонними компонентами
Также есть плагины для формирования слайдов из элементов компонентов Virtuemart, K2, HikaShop. Подробнее.
Настройка модуля Slideshow CK
Страница редактирования модуля имеет много присущих данному слайдеру вкладок:
- Slides source
Здесь можно выбрать источник слайдов. Каждый источник настраивается в отдельной вкладке. По умолчанию можно использовать только Slides Manager, для остальных источников необходимо устанавливать дополнительный плагин Slideshow Params
- Slides manager
Пользовательские слайды: контент каждого слайда настраивается индивидуально.
- Autoload from a folder (требуется плагин Slideshow Params)
Формирование слайдов из изображений в указанной папке.
- Autoload from a category of articles (требуется плагин Slideshow Params)
Формирование слайдов из материалов Joomla определённой категории.
- Autoload from a Flickr (требуется плагин Slideshow Params)
Формирование слайдов из галереи Flickr.
- Styles options
Настройки стиля отображения слайдера. Здесь же можно сменить основную тему на дополнительную, входящую в пакет Package theme Default.
- Effect options
Настройки эффектов при смене слайдов.
- Lightbox options (требуется плагин Slideshow Params)
Открытие ссылок в модальном окне.
- Дополнительные параметры
Загрузка jQuery, отключение HTML-тегов в контенте и т. д.
- Article options
Настройка вывода контента из материалов Joomla.
- Caption styles
Кастомизация стиля подписей к слайдам.
- Hikashop options (требуется плагин Slideshow Params)
Формирование слайдов из товаров компонента Hikashop.
Вердикт по Slideshow CK
Достаточно мощное расширение для создания привлекательного слайдера на сайте Joomla с массой возможностей по кастомизации. Пусть вас не пугает наличие платных расширений для этого модуля: по умолчанию Slideshow CK генерирует красивые слайдеры, слайды для которых можно создать вручную во вкладке Slides manage.
RokSprocket
Третье расширение для реализации слайдера на Joomla.
Начнём с того, что RokSprocket — это особенное расширение, которое позволяет создавать не только слайдеры, но и другие вариации модулей для сайта на Joomla:
- вкладки (Tabs),
- таблицы (Tables),
- списки (Lists),
- вкладки (Tabs),
- таблицы (Tables),
- галереи (Mosaic),
- и т. д.
Всё это делает RokSprocket многофункциональным расширением, что отражается на его тяжеловесности: дистрибутив весит около 3700 Кб и включает библиотеку, компонент, модуль и три плагина, а также версию для MACOSX.
Весь функционал RokSprocket достаётся совершенно бесплатно.
Возможности RokSprocket
Рассмотрим возможности данного расширения в отношении создания слайдеров.
Как указывалось ранее, модуль RokSprocket имеет несколько вариаций, которые выбираются при его создании. Интересующая нас вариация называется Features, и в этой вариации можно:
- выбирать источник формирования слайдов
Пользовательские слайды, материалы Joomla, а также материалы ZOO и K2.
- редактировать контент слайдов
Указывать заголовок, описание, картинку и ссылку отдельно для каждого слайда.
- выбирать предопределенный стиль слайдера
На выбор предоставляется 3 темы.
- вставлять HTML-теги в названия или описания
Эту возможность можно отключить.
- кастомизировать функции слайдера
Включать/отключать пагинацию, стрелки навигации, автовоспроизведение и т. д.
- выбирать тип анимации
- предопределять размер картинок
Следует отметить, что модули RokSprocket имеют свой оригинальный интерфейс в панели администрирования и используют технологию Ajax при сохранении.
Вердикт по RokSprocket
Если вам нужен исключительно слайдер для главной (или другой страницы), то проходите мимо RokSprocket'а — это расширение предлагает лишь фундаментальные настройки слайдера, не давая возможности гибко кастомизировать стиль модуля без знания CSS, при этом внося в CMS слишком много лишнего функционала. Однако, если вам необходим не только слайдер, но также модуль модуль галереи, вкладки с содержимым или другие вариации модулей, то рекомендуем обратить внимание на это расширение.
Слайдеры продвинутого уровня
Слайдеры продвинутого уровня отличаются большой проработкой деталей. Их позволяют создавать мощные компоненты, сравнимые по проработке деталей с конструкторами лэндингов, но их возможности направлены исключительно на создание слайдера. Метафорично конструктор лэндингов — это покрасочный цех машин, а конструктор слайдеров — это художественная мастерская по вип-покраске мелких деталей.
Основные отличия продвинутых слайдеров:
- Холст
Для создания слайдеров нам предоставляется холст на котором мы можем позиционировать элементы в свободном порядке. Как в фотошоп накидываем элементы и размещаем их на холсте. Не нужны отступы и позиционирование элементов, просто перетаскиваем мышкой и оставляем в нужном месте.
- Слои
Каждый аддон для слайда (текст, изображение, заголовок, кнопка и прочее) является слоем и имеет свои настройки.
- Эффекты
Большое количество эффектов, которые можно назначить на появление и пропадание каждого слоя. Все виды параллакса как для слайдера целиком, так для слайдов и его слоев. Слои могут появляться, двигаться и исчезать по определенным событиям.
- Размеры и адаптивность
Любые размеры: во всю ширину, во всю высоту и разные вариации заполнения пространства фоном, а так же проработка слайдов для мобильных устройств.
- Детальная настройках всех элементов
Мы можем настроить в большинстве своем любые элементы слайдера и вписать его в свой дизайн. Большинство слайдеров начального уровня навязывают свои базовые настройки и элементы управления в результате чего может происходить смешение стилей.
- Динамический контент.
Создание слайда и шаблона для автоматического заполнения динамическим контентом, т. е. материалами из других расширений: магазины, блог, соц. сети, стандартный контент, RSS-ленты и многое другое. В базовых слайдерах тоже есть такая возможность, но существенно меньшее количество источников с очень слабыми возможностями настройки внешнего вида.
С помощью слайдеров продвинутого уровня можно делать лэндинги, для этого есть весь необходимый функционал. Испробовав все варианты создания лэндингов я скажу, что слайдеры идеально дополняют конструкторы лэндингов, т. к. в конструкторах все, что связано со слайдерами жестко привязано к сетке, ограничено в настройках внешнего вида и эффектах.
Лучшими в своём роде расширениями для создания продвинутых слайдеров на Джумла являются.
| Slider Revolution | Smart Slider | |
|---|---|---|
| Типов слайдеров | 2 | 5 |
| Шаблонов | 80+ | 100+ |
| Типов слоёв | 8 | 21 |
| Динамических источников | 8 | 22 |
| Библиотека объектов | ❌ | ✔️ |
| Дополнения | ✔️ | ❌ |
| Режимы редактирования | ❌ | ✔️ |
| Библиотека слайдов | ❌ | ✔️ |
| Анимированные разделители | ❌ | ✔️ |
| Рандомизация слайдов | ❌ | ✔️ |
В качестве заключения
Мы рассмотрели 3 бесплатных слайдера начального уровня для Joomla и сделали следующие выводы:
- используйте DJ-ImageSlider, если вам нужно максимально легкое расширение и слайдер не требует изысканного стилевого оформления;
- используйте Slideshow CK, если желаете повозиться с кастомизацией стиля слайдера, или если требуется вставить в слайд видеоконтент;
- используйте RokSprocket, если вам необходим не только слайдер, но и другие вариации модулей.
Для создания продвинутых слайдеров используются мощные коммерческие расширения, самым функциональным из которых является Smart Slider 3.