Карусель jCarousel

Вторник, 17 Августа 2010. Категория: JS (Jquery, Mootools)

jCarousel это jQuery плагин для реализации вертикальной или горизонтальной "карусели". В качестве элементов "карусели" может быть статический HTML контент или загруженный средствами AJAX

Примеры

Ниже приведены примерв иллюстрирующие возможности плагина jCarousel:

• Статические примеры
  • Горизонтальная карусель
  • Вертикальная карусель
  • Циклическая карусель
  • Карусель с автоскроллом
  • Карусель показывающая работу скрипта
  • Карусель с внешним управлением
  • Карусель с произвольным стартовым элементом
  • Множество каруселей на странице
• Динамические примеры
  • Карусель с динамической подгрузкой контента через JavaScript
  • Карусель с динамической подгрузкой контента через Ajax
  • Карусель с динамической подгрузкой контента через Ajax из PHP скрипта
  • Карусель с динамической подгрузкой контента через Ajax из Flickr-а
  • Карусель с динамической подгрузкой контента через Ajax из Flickr API
• Спецпримеры
  • Использование jCarousel для скролла текста
  • Резиновая карусель
  • jCarousel и Thickbox 3
  • Карусель с различными анимационными эффкектами

Использование

Подключаем библиотеку jQuery, плагин и файл стилей

Далее вызываем функцию карусели

Для настройки плагина есть множество опцый, они описаны в конце статьи.

Разметка

Структура HTML разметки очень проста и представляет собой список с идентификатором карусели

name">       

После инициализации плагина разметка карусели будет выглядеть следующим образом:

name">
    
Первый элемент
Второй элемент
Последний элемент

Исходный код

Исходный код и пример скачать можно здесь

Настройки

Некоторые опции плагина

Опция	Тип	По умолчанию	Описание
vertical	bool	false	Устанавливает положение карусели вертикальное, по умочанию положение горизонтальное.
rtl	bool	false	Устанавливает режим карусели RTL (справа на лево).
start	integer	1	Номер элемента с которого начнется отображение.
offset	integer	1	Номер первого доступного элемента в инициализации
size	integer	Количество существующих элементов если размер не передается явно	Общее количество элементов
scroll	integer	3	Количество элементов прокручивающихся за раз
visible	integer	null	Количество видимых элементов в карусели. Если не указано, ширина/высота элементов будет вычислена и установленна в зависимости от ширины/высоты карусели.
animation	mixed	"fast"	Скорость прокручивания элементов "slow" или "fast" или в млисекундах. Если установленно 0, то прокручивание будет отключено
easing	string	null	Наименование эффекта прокручивания (см. jQuery документацию).
auto	integer	0	Устанавливает период прокручивания при автоскролле. Если 0 - автоскролл отключен.
wrap	string	null	Устанавливает окончание прокрутки либо цикличную прокрутку ( "first", "last", "both", "circular")
buttonNextHTML	string		HTML разметка для кнопки "next". Если установленно null, кнопки "next" не будет
buttonPrevHTML	string		HTML разметка для кнопки "prev". Если установленно null, кнопки "prev" не будет
buttonNextEvent	string	"click"	Устанавливает событие при котором будет включаться кнопка "next"
buttonPrevEvent	string	"click"	Устанавливает событие при котором будет включаться кнопка "prev"
itemFallbackDimension	integer	null	Если по каким-либо причинам плагин jCarouse не может определить размеры элементов, вы можете установить размеры (ширину или высоту в зависимости от ориентации карусели)