Открыть меню    

jCarousel

Карусель на jQuery

плагин jQuery jCarousel jCarousel - это плагин jQuery для управления элементами списка в вертикальной или горизонтальной плоскости. Элементами могут являться статичные html-блоки или контент, сгенерированный при помощи (или без) AJAX. Элементы можно прокручивать вперед и назад как при помощи анимации, так и без нее.

Следующие примеры иллюстрируют возможности jCarousel.

Чтобы начать использовать плагин jCarousel подключите библиотеку jQuery, javascript файл с самой каруселью и файл стилей для jCarousel внутри тега head вашего документа.

<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />

jCarousel ожидает от вас простую html разметку внутри html документа:

<ul id="mycarousel" class="jcarousel-skin-name">
   <!-- The content goes in here -->
</ul>

jCarousel автоматически оборачивает список необходимым html кодом.

Для вызова и настройки jCarousel расположите следующий html код внутри тега head.


jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        // Configuration goes here
    });
});

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

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

<div class="jcarousel-skin-name">
  <div class="jcarousel-container">
    <div class="jcarousel-clip">
      <ul class="jcarousel-list">
        <li class="jcarousel-item-1">First item</li>
        <li class="jcarousel-item-2">Second item</li>
      </ul>
    </div>
    <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
    <div class="jcarousel-next"></div>
  </div>
</div>

Как вы можете видеть выше, помимо самого списка присутствуют новые элементы с заданными классами. Не стесняйтесь менять дизайн карусели, используя классы, которые вы можете видеть выше.

Отметьте:

  • Класс, отвечающий за внешний вид (skin) jcarousel-skin-name (вы можете создавать собственный внешний вид плагина), перенесен из списка в элемент div на один уровень выше.
  • Два соседних блока под <div class="jcarousel-container"> это кнопки вперед/назад карусели. Неактивная кнопка имеет атрибут disabled.
  • Все элементы списка имеют класс jcarousel-item-n, где n отображает позицию элемента в списке.
  • Здесь не показано, но к элементам добовляются дополнительные классы, которые характеризуют ориентацию карусели, например <ul class="jcarousel-list jcarousel-list-horizontal"> для горизонтальной карусели.

Динамическая загрузка контента

Передавая функцию обратного вызова itemLoadCallback в качестве конфигурационного параметра, вы получаете возможность динамически создавать элементы li.


jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        itemLoadCallback: itemLoadCallbackFunction
    });
});

itemLoadCallbackFunction это JavaScript функция, которая будет вызвана, когда необходимые элементы карусели будут загружены. Функции передается два параметра: ссылка на экземпляр карусели и флаг, которые указывает на текущее состояние карусели (‘init’, ‘prev’ или ‘next’).

function itemLoadCallbackFunction(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        // Check if the item already exists
        if (!carousel.has(i)) {
            // Add the item
            carousel.add(i, "I'm item #" + i);
        }
    }
};

jCarousel имеет метод add(), позволяющий указывать индекс создаваемого элемента и индекс элемента для обновления содержимого. Если элемент уже существует, то его содержание будет обновлено. Вы можете использовать в качестве ссылки на первый и последний видимые элементы переменные carousel.first и carousel.last.

jCarousel содержит множество параметров, позволяющих управлять видимостью и поведением карусели.

Свойство Тип Значение по умолчанию Описание
verticalbool false Указываем ориентацию карусели: с горизонтальной прокруткой или с вертикальной
rtl bool false Указываем режим карусели RTL (справа на лево)
start integer 1 Индекс элемента с которого начинается отображение
offset integer 1 Индекс элемента с которого будет происходить инициализация
size integer Количество элементов <li>, если размер не указан явно Общее количество элементов
scroll integer 3 Количество элементов для прокрутки (шаг)
visible integer null Если задано, ширина/высота элементов будет вычислена и установлена в зависимости от ширины/высоты обрезки, так, чтобы указанное число пунктов было видимо.
animation mixed «fast» Скорость анимации (прокрутки) в терминах jQuery ("slow","fast") или в миллисекундах. Если 0 анимация выключена
easing string null Наименование эффекта (смотрите jQuery Documentation)
auto integer 0 Устанавливаем время (сек.) прокрутки при автоскролле. Если 0 - автоскролл отключен.
wrap string null Указываем поведение по достижению первого и последнего пункта (зацикливать или нет). Возможны значения "first", "last", "both" или "circular"
initCallback function null js ф-я, которая вызывается
при инициализации карусели. Передается два параметра: экземпляр карусели и состояние (init, reset или reload)
itemLoadCallback function null js ф-я, которая вызывается
при загрузке объектов. Передается два параметра: экземпляр карусели и состояние (init, reset или reload)
itemFirstInCallback function null js ф-я, которая вызывается
(по завершению анимации) когда элемент становится первым в зоне видимости поля карусели. Передается 4 параметра: экземпляр карусели , ссылка на элемент <tr> этого объекта, индекс , указывающий позицию элемента в списке и состояние карусели (prev, next, init)
itemFirstOutCallback function null js ф-я, которая вызывается
(по завершению анимации) когда элемент перестает быть первым в зоне видимости поля карусели. Передается 4 параметра: экземпляр карусели , ссылка на элемент <li> этого объекта, индекс , указывающий позицию элемента в списке и состояние карусели (prev, next, init)
itemLastInCallback function null js ф-я, которая вызывается
(по завершению анимации) когда элемент становится последним в зоне видимости поля карусели. Передается 4 параметра: экземпляр карусели , ссылка на элемент <li> этого объекта, индекс , указывающий позицию элемента в списке и состояние карусели (prev, next, init)
itemLastOutCallback function null js ф-я, которая вызывается
(по завершению анимации) когда элемент перестает быть последним в зоне видимости поля карусели. Передается 4 параметра: экземпляр карусели , ссылка на элемент <li> этого объекта, индекс , указывающий позицию элемента в списке и состояние карусели (prev, next, init)
itemVisibleInCallback function null js ф-я, которая вызывается
(по завершению анимации) когда элемент находится в зоне видимости поля карусели. Передается 4 параметра: экземпляр карусели , ссылка на элемент <li> этого объекта, индекс , указывающий позицию элемента в списке и состояние карусели (prev, next, init)
itemVisibleOutCallback function null js ф-я, которая вызывается
(по завершению анимации) когда элемент не входит в зону видимого поля карусели. Передается 4 параметра: экземпляр карусели , ссылка на элемент <li> этого объекта, индекс , указывающий позицию элемента в списке и состояние карусели (prev, next, init)
buttonNextCallback function null js ф-я, которая вызывается
при изменение состояния кнопки «next». При помощи этой функции можно управлять поведением кнопки «next». Передается 3 параметра: экземпляр карусели , ссылка на элемент управления и флаг , показывающий состояние кнопки (enabled/disabled)
buttonPrevCallback function null js ф-я, которая вызывается
при изменение состояния кнопки «prev». При помощи этой функции можно управлять поведением кнопки «prev». Передается 3 параметра: экземпляр карусели , ссылка на элемент управления и флаг , показывающий состояние кнопки (enabled/disabled)
buttonNextHTML string <div></div> HTML разметка для автоматически генерируемой кнопки «next». Если значение null кнопка не будет создана
buttonPrevHTML string <div></div> HTML разметка для автоматически генерируемой кнопки «prev». Если значение null кнопка не будет создана
buttonNextEvent string «click» Устанавливаем событие для прокрутки на шаг вперед
buttonPrevEvent string "click" Устанавливаем событие для прокрутки на шаг назад
itemFallbackDimension integer null Если, по некоторым причинам, jCarousel не может определить ширину элемента, вы можете использовать запасные размеры (ширина или высота, в зависимости от ориентации), этим мы гарантируем корректное вычисление

jCarousel скрываем кнопки next и prev по disable

.jcarousel-prev-disabled, .jcarousel-next-disabled
{
    visibility:hidden;
}

Источник

Комментарии к статье

аватарка пользователя
2014-02-05
Alex

Подскажите в чём может быть причина, когда загружается страничка все элементы в кучу собираются, у элемента li ширина маленькая задана, а если изменить размер окна то карусель перестраивается и становится нормальной, т.е. располжение элементов как задано в настройках.

аватарка пользователя
2014-02-05
dnzl

Alex, тяжело сказать, но, если при изменении окна становится все нормально, то, возможно, дело в стилях