jCarousel

Карусель на jQuery

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 содержит множество параметров, позволяющих управлять видимостью и поведением карусели.

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

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

Источник