br 8eb34


search

Модуль Unite Horizontal Carousel

unitecarС помощью модуля Unite Horizontal Carousel можно с легкостью реализовать на своём сайте эффект карусели из выбранных картинок, которые будут пролистываться автоматически или нажатием на стрелки навигации. Размер и расстояния между изображениями легко настраиваются и к ним можно привязать различные ссылки. Модуль работает на библиотеке jQuery и имеет несколько эффектов переходов между картинками.

unitecar1

Возможности модуля 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,

unitecar2

на которую нужно кликнуть и дальше Создавать картинки для карусели, заполнив параметры указанные на картинке:

 unitecar3

Когда необходимые изображения будут добавлены, можно перейти к модулю Unite Horizontal Carousel. В модуле указываются позиция, страницы для отображения и в General Settings выбирается карусель для вывода на сайте. Дополнительные настройки стоит менять в том случае, если возникли проблемы с отображением модуля. Они содержат:

unitecar4Include jQuery 1.7 js - включить или нет библиотеку jQuery
Include item JS in - выбор места для включения скрипта
No Conflict Mode - использовать или нет анти-конфликт скриптов
Суффикс CSS-класса модуля - указать при необходимости свой суффикс класса
Кэширование - используется или нет Кэш на сайте
Срок кэширования - время кэша, если используется

 

Данный модуль также можно опубликовать в статьях с помощью плагина Modules Anywhere, который добавляет модули в материалы.

Спонсором данной статьи сегодня является коттеджный поселок николино, который расположен в потрясающем месте с изысканными ландшафтом и числейшим воздухом.

 

demo

Добавить комментарий

Защитный код
Обновить

Комментарии