С помощью модуля Unite Horizontal Carousel можно с легкостью реализовать на своём сайте эффект карусели из выбранных картинок, которые будут пролистываться автоматически или нажатием на стрелки навигации. Размер и расстояния между изображениями легко настраиваются и к ним можно привязать различные ссылки. Модуль работает на библиотеке jQuery и имеет несколько эффектов переходов между картинками.
Возможности модуля Unite Horizontal Carousel
- назначение цвета фона и границы, а также при наведении на них
- 2 типа навигационных стрелок - темный и светлый
- выбор направления прокрутки изображений
- 5 эффектов перелистывания картинок
- настройка расположения карусели
- автоматическое перелистывание или стрелками
- изменение высоты и ширины модуля
Установка и настройка
Модуль Unite Horizontal Carousel работает на CMS Joomla версий 2.5 и 3. После стандартной установки, будут доступны компонент Unite H Carousel (здесь происходит загрузка изображений и основная настройка) и модуль Unite Horizontal Carousel (который выводит загруженные в компоненте картинки).
Итак, для начала нужно перейти к компоненту Unite H Carusel и нажать иконку Создать, для добавления новой карусели. Дальше указать Заголовок и выполнить настройки:
General
- Carousel Width - ширина модуля карусели
- Item Image Width - ширина изображения в карусели
- Item Image Height - высота этой картинки
- Space Between Image - расстояние между изображениями в карусели
Position
- Carousel Position - расположение модуля (по центру, слева, справа)
- Left Margin - отступ слева
- Right Margin - значение отступа справа
- Top Margin - отступ сверху
- Bottom Margin - расстояние до низа
- Add Clear Both - добавить запрет на обтекание или нет
Apperance
- Image Border Width - ширина границы картинки в карусели
- Border Color - цвет границы изображения
- Image Padding - расстояние вокруг картинки
- Image Background Color - цвет фона
- Border Color - Mouseover - цвет границы при наведении
- Back. Color - Mouseover - цвет фона при наведении курсора
Direction Arrows
- Show Direction Arrows - показывать или нет стрелки навигации
- Arrows Type - тип стрелки (темный или светлый)
- Arrows Sides Padding - расстояние между картинкой и стрелкой
- Arrows Vertical Tuning - расположение стрелок по вертикали
Scroll Settings
- Direction - направление пролистывания (влево, вправо)
- Pause Duration - задержка перед пролистыванием
- Num Scrolling Items - количество картинок при пролистывании
- Scrolling Type - выбор типа прокрутки
- Transition Duration - время эффекта прокрутки
- Pause On Hover - останавливать или нет пролистывание при наведении
После того, как необходимые настройки были внесены можно сохранять изменения. Затем появится ссылка Edit Items,
на которую нужно кликнуть и дальше Создавать картинки для карусели, заполнив параметры указанные на картинке:
Когда необходимые изображения будут добавлены, можно перейти к модулю Unite Horizontal Carousel. В модуле указываются позиция, страницы для отображения и в General Settings выбирается карусель для вывода на сайте. Дополнительные настройки стоит менять в том случае, если возникли проблемы с отображением модуля. Они содержат:
Include jQuery 1.7 js - включить или нет библиотеку jQuery
Include item JS in - выбор места для включения скрипта
No Conflict Mode - использовать или нет анти-конфликт скриптов
Суффикс CSS-класса модуля - указать при необходимости свой суффикс класса
Кэширование - используется или нет Кэш на сайте
Срок кэширования - время кэша, если используется
Данный модуль также можно опубликовать в статьях с помощью плагина Modules Anywhere, который добавляет модули в материалы.
