Делаем карусель на jQuery. Часть первая.

Сегодняшний день вплотную посвятим созданию простой, но красивой и удобной карусели на jQuery. Для создания карусели будем использовать плагин jCarousel. И в этой статье краткое описание основных возможностей и функционала плагина.

Итак, jCarousel это jQuery плагин для, по сути, управления списками. Элементы списка могут быть жестко прописаны на страничке, либо подгружаемы с помощью AJAX.

Подключение плагина стандартное:

  1. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  2. <script type="text/javascript" src="jquery.jcarousel.min.js"></script>
  3. <link rel="stylesheet" type="text/css" href="skin.css" />

Соответственно, сам жквери, плагин карусели и файл со стилями скина.
Чтобы подключить карусель, достаточно написать:

  1. <ul id="mycarousel" class="jcarousel-skin-name">
  2.    <li>Первый элемент</li>
  3.    <li>Второй элемент</li>
  4.    ...
  5. </ul>

После этого плагин преобразует html разметку к такому виду:

  1. <div class="jcarousel-skin-name">
  2.   <div class="jcarousel-container">
  3.     <div class="jcarousel-clip">
  4.       <ul class="jcarousel-list">
  5.         <li class="jcarousel-item-1">Первый элемент</li>
  6.         <li class="jcarousel-item-2">Второй элемент</li>
  7.       </ul>
  8.     </div>
  9.     <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
  10.     <div class="jcarousel-next"></div>
  11.   </div>
  12. </div>

Вобщем-то ничего сложного :) .
Теперь поговорим о том, как определить число видимых элементов. Это достаточно просто — достаточно определить ширину для класса .jcarousel-clip. Это удобно — можно задать как фиксированную, так и процентную ширину.
Вообще в стилях достаточно много чего можно настроить. В комплекте поставляются лишь два, но их можно легко переделать под себя. Подробнее про них в следующей части.
Теперь перейдем к описанию основных настроек плагина:

jCarousel имеет множество настроек, определяющих поведение плагина. Итак, вот они:

Свойство Тип По умолчанию Описание
vertical bool false Определяет ориентацию карусели. По умолчанию горизонтальная.
rtl bool false Определяет направление карусели как Справа-Налево. По умолчанию Слева-Направо
start integer 1 Индекс элемента, с которого начинать карусель.
offset integer 1 Индекс первого, доступного для карусели элемента.
size integer Число существующих элементов <li> Число элементов.
scroll integer 3 Число элементов, прокручивающихся за одну прокрутку.
visible integer null Если указана, ширина и высота элементов будет вычислена таким образом, чтобы показать указанное число элементов.
animation mixed «fast» Скорость анимации при прокрутке элементов.
easing string null Название easing-эффекта, который нужно использовать.
auto integer 0 Обозначает задержку между автопрокрутками карусели в секундах. По умолчанию автопрокрутка отключена.
wrap string null Определяет каким образом зацикливать карусель. Варианты: «first», «last», «both» или «circular». По умолчанию не зацикливается.
initCallback function null Функция, которая будет вызвана после инициализации карусели. Передаваемые параметры: указатель на карусель и состояние карусели (init, reset или reload)
itemLoadCallback function null Функция, вызываемая после загрузки элементо в карусель. Параметры: указатель на карусель и состояние карусели (действие) (prev, next или init). Также можно передать две функции в виде хеша — для обработы событий до загрузки и после загрузки:

itemLoadCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

itemFirstInCallback function null Функция вызывается, когда элемент становится первым среди видимых в карусели. Получает 4 параметра: указатель на карусель; на объект <li>; индекс, указывающий на позицию элемента среди всех элементов списка; действиенад каруселью (prev, next или init). Также можно передать две функции в виде хеша, они будут вызваны до и после события:

itemFirstInCallback: {

onBeforeAnimation: callback1,

onAfterAnimation: callback2

}

buttonNextHTML string <div></div> HTML разметка для генерации кнопки прокрутки вперед. Если null, кнопки не будет.
buttonPrevHTML string <div></div> HTML разметка для генерации кнопки прокрутки назад. Если null, кнопки не будет.
buttonNextEvent string «click» Событие, которое вызывает прокрутку вперед.
buttonPrevEvent string «click» Событие, которое вызывает прокрутку назад.
itemFallbackDimension integer null Если jCarousel не может корректно определить ширину элемента, можно установить значение (width или height, в зависимости от ориентации) для более точных вычислений.

Страница плагина — jCarousel, там можете скачать плагин, а также посмотреть дополнительные примеры работы.

Запись опубликована в рубрике JS & jQuery с метками , , , , . Добавьте в закладки постоянную ссылку.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">