Плагин jQuery «карусель»

jQuery плагин создает "карусель" - виджет для изображений или другого контента из простой HTML разметки. HTML-разметка, которая может быть использована для создания карусели, должна быть следующей:


<div class="carousel">
<ul>
<li><img src="foto/1.jpg" alt="1"></li>
<li><img src="foto/2.jpg" alt="2"></li>
<li><img src="foto/3.jpg" alt="3"></li>
</ul>
</div>

При разметке нет необходимости добавления специальных атрибутов "class" или дополнительного css файла для функционирования данного плагина. Для навигации по элементам "карусели" понадобятся навигационные кнопки. Например, кнопки "предыдущая" для навигации назад и "следующая" для навигации вперед. Эти элементы не нужно помещать внутрь "div" с "каруселью", они могут быть в любом месте на странице. Разметка в этом случае такая:


<button class="prev"><<</button>
<button class="next">>></button>

Теперь остается только вызвать "карусель" на элементе для соответствующего элемента, в качестве опций используются кнопки навигации:


$(".carousel").jCarouselLite({
	btnNext: ".next",
	btnPrev: ".prev"
});

Таким образом, мы получили "карусель" из элементов внутри "div". В плагине имеются несколько опций для кастомизации:
Изменить надпись на кнопках навигации btnPrev, btnNext, используемых для прокрутки назад/вперед, меняем соответствующие значения:


$(".carousel").jCarouselLite({
	btnNext: ".next",
	btnPrev: ".prev"
});

Опция btnGo - используется для установки в качестве навигации кликая по порядковому номеру, а не кнопкам next/previous:


$(".carousel").jCarouselLite({
	btnNext: ".next",
	btnPrev: ".prev",
	btnGo: [".0", ".1", ".2"]
});

Для использования этой опции добавьте в массив селекторы для каждого элемента карусели. Индекс элемента массива соответствует соответствующему элементу карусели, таким образом, кликнув по ".0" карусель переместится к своему первому элементу. Данную опцию можно также использовать для создания таб-навигации контента с анимационными эффектами.

Опция mouseWheel - смена элементов может осуществляться при прокрутке колесика мыши. Для этого необходимо: 1. Подключить mouse-wheel плагин jQuery. 2. Установить опцию mouseWheel в значение true:


$(".carousel").jCarouselLite({
	mouseWheel: true
});

Опция auto - по-умолчанию равна нулю - используется для автоматической смены элементов карусели. Принимает значения устанавливаемого количества милисекунд для смены двух слайдов:


$(".carousel").jCarouselLite({
	auto: 900,
	speed: 400
});

Опция speed - по умолчанию равна 200 - устанавливает скорость выполнения сдвига элементов карусели. При установке значения равным нулю удаляется слайд-эффект.

Опция easing - по умолчанию без эффектов - для функционирования необходим дополнительный easing плагин:


$(".carousel").jCarouselLite({
	easing: "bounceout"
});

Опция vertical - определяет направление отображения карусели (вертикальное/горизонтальное). При выборе вертикального значения кнопки next и prev будут смещать элементы по вертикали. Значение по умолчанию - "false" - карусель будет отображаться по горизонтали. И в этом случае prev/next элементы будут смещаться слева направо.

Опция circular -по умолчанию true - активирует круговую навигацию. Это означает, что если нажать на кнопку "далее" после достижения последнего элемента, слайд автоматически сместится на первый элемент списка и наоборот. Если установить циклическое значение false, то при нажатии на кнопку "далее" при достижении последнего элемента, слайдер остановится на последнем элементе.

Опция visible - по умолчанию равно 3 - этот параметр определяет количество элементов, постоянно видимых в "карусели". При этом можно экспериментировать с цифрами, например значение "3.5" покажет 3 элемента полностью видимыми и последний элемент видимым наполовину.

Опция start - по умолчанию 0 - можно выбрать, с какого элемента карусель должна начинаться. При этом первый элемент в карусели имеет порядковый номер 0, второй 1, третий 2 и т.д.

Опция scroll - по умолчанию равно 1 - число элементов, которые должны смещаться в слайдер при клике на кнопки навигации next/prev. По умолчанию это только один элемент прокрутки, но можно установить любое число. Например, установка значения "2" будет прокручивать 2 пункта при клике по кнопкам навигации.

Опция beforeStart, afterEnd - callback функции, которые используются для добавления чего-нибудь в страницу перед запуском слайдера или после окончания использования слайдера, т.е. можно зарегистрировать 2 обратных вызова. В функции будет передан аргумент - массив элементов, которые видимы во время обратного вызова.

Плагин jQuery «карусель»

Скачать архивы