JCarouselLite. Прокрутка слайдов

Автор: Александр Головко Дата публикации: 17.07.2010

JCarouselLite занимает достойное место среди моих любимых плагинов. Эта мощная галерея с массой настроек и возможностей подойдет для решения практически любой «галерейной» задачи. Кроме того, она очень компактна — запакованный вариант весит чуть больше 2Кб!

Но хватит петь дифирамбы, пора показать, как это выглядит в деле.

Простейший демо-пример — минимум возможностей, просто листалка слайдов.

Проверено в:

  • IE 6-8
  • Firefox 3
  • Opera 9.5-10
  • Safari 3

Что качать?

Быстрый старт

Подключаем библиотеки:

<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> /* если нужна мышь*/
<script type="text/javascript" src="js/jcarousellite.js"></script>

Базис галереи — список. Отдельные li станут слайдами. Список оборачиваем в div с каким-либо идентификатором (id или классом).

<div class="gallery">
	<ul>
		<li><img src="img/pic1.jpg" height="113px" width="150px" alt=""/></li>
		<li><img src="img/pic2.jpg" height="113px" width="150px" alt=""/></li>
		<li><img src="img/pic3.jpg" height="113px" width="150px" alt=""/></li>
		<li><img src="img/pic4.jpg" height="113px" width="150px" alt=""/></li>
	</ul>					
</div>

Еще два произвольных тега назначаем на ответственную руководящую должность — они будут управлять прокруткой галереи. Пока просто присваиваем им id (или класс). Сразу замечу, что эти элементы вовсе не обязательны. Галерею можно попросить крутиться самостоятельно, в автоматическом режиме.

<button class="prev">Влево</button>				
<button class="next">Вправо</button>				

Инициализируем галерею:

<script type="text/javascript">
jQuery(function(){
jQuery(".gallery").jCarouselLite({
		btnNext: ".next",
		btnPrev: ".prev"
	});
});
</script>

Все! Простейшая галерея готова к работе.

А теперь подробнее

Вся магия заключена в параметрах функции jCarouselLite. Познакомься с ними детальнее:

Параметры jCarouselLite()

Название параметра Описание возможные значения
btnPrev параметр, указывающий на класс или id кнопки, при нажатии на которую происходит переход на предыдущую страницу .className, #idName
btnNext параметр, указывающий на класс или id кнопки, при нажатии на которую происходит переход на следующую страницу .className, #idName
btnGo параметр, указывающий на классы или id кнопок, которыя ведут сразу к определенному элементу галереи .className, #idName
mouseWheel если задано, то галерея будет прокручиваться колесом мыши true
auto указывает с шагом в сколько миллисекунд галерея будет прокручиваться сама int
speed указывает с какой скоростью в миллисекундах будет прокручиваться галерея int
easing задает эффект, возникающий при прокручивании галереи (для этого необходимо подключить easing.js) название эффекта
vertical если указан, то галерея будет располагаться вертикально true
circular по умолчанию галерея будет прокручиваться по кругу, т.е. после последнего изображения будет идти первое, но если указано значение false, то прокручивания не будет false
visible указывает количество элементов галереи, видимых одновременно int
start определяет с какого элемента по порядку начинается галерея (первый элемент имеет значение 0) int
scroll задает количество элементов, которые должны одновременно прокручиваться при щелчке на кнопку int
beforeStart js функция выполняющаяся перед каждым переходом между элементами галереи функция
afterEnd js функция выполняющаяся после каждого перехода между элементами галереи функция
Примеры инициализации

Самый частый случай — галерея с кнопками и прокруткой колесиком мыши (не забудь подключить jquery.mousewheel.min.js):

<script type="text/javascript">
jQuery(function(){
jQuery(".gallery").jCarouselLite({
		btnNext: ".next",
		btnPrev: ".prev",
		mouseWheel: true
	});
});
</script>

Демо-пример

Проверено в:

  • IE 6-8
  • Firefox 3
  • Opera 9.5-10
  • Safari 3

Вертикальная галерея:

<script type="text/javascript">
jQuery(function(){
jQuery(".gallery").jCarouselLite({
		btnNext: ".next",
		btnPrev: ".prev",
		vertical: true
	});
});
</script>

Демо-пример

Проверено в:

  • IE 6-8
  • Firefox 3
  • Opera 9.5-10
  • Safari 3

Галерея прокручивается автоматически:

<script type="text/javascript">
jQuery(function(){
jQuery(".gallery").jCarouselLite({
		auto: 800,
		speed: 1000
	});
});
</script>

Демо-пример

Проверено в:

  • IE 6-8
  • Firefox 3
  • Opera 9.5-10
  • Safari 3

Стили для неактивных кнопок прокрутки

Хочется поделиться еще одним нюансом, который почему-то не нашел отражения в официальной документации плагина. В случае, если галерея работает не как закольцованная, то в момент, когда выводиться последний слайд кнопка next получает класс disabled. Аналогично ведет себя, конечно, и кнопка prev если уже выведена первая картинка. К этим классам желательно привязать оформление неактивных кнопок, чтоб не запутывать пользователя.

update 19.07.10 — галерея в невидимом блоке

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

Демо-пример

Проверено в:

  • IE 6-8
  • Firefox 3
  • Opera 9.5-10
  • Safari 3

update 26.07.10 Резиновая верстка

В случае, если блок, внутри которого живет карусель резиновый, можно при показе страницы подсчитывать, сколько влазит слайдов и инициализировать плагин с параметром visible.

Демо-пример

Проверено в:

  • IE 6-8
  • Firefox 3
  • Opera 9.5-10
  • Safari 3

update 19.03.11 Прокрутка галереи при наведении мыши на кнопку

Для того чтобы научить плагин прокручивать галерею не по нажатию на кнопки, а по наведению на них мыши придется модифицировать js-код.

На самом деле все достаточно просто. Открываем jcarousellite.js и ищем следующие строки:

if(o.btnPrev)
 $(o.btnPrev).click(function() {
  return go(curr-o.scroll);
 });
if(o.btnNext)
 $(o.btnNext).click(function() {
  return go(curr+o.scroll);
 });

Вот они-то и отвечают, за то что произойдет при нажатии на кнопки. Просто поменяем click на hover. Естественно, если при наведении мыши карусель должна начать крутиться автоматически, а не сдвинуться один раз, код несколько усложнится.

У меня сходу получился такой вариант (привожу фрагмент только для одной кнопки):

var intervalID;
if(o.btnPrev)
 $(o.btnPrev).hover(
  function () {
   o.auto=800;
   intervalID = setInterval(function() {
    go(curr-o.scroll);
    }, o.auto+o.speed);
  }, 
  function () {
   clearInterval(intervalID);
  }
);

o.auto=800 — это скорость автоматической прокрутки.

Более детально посмотреть код можно в демо-примере

Проверено в:

  • IE 6-8
  • Firefox 3.5
  • Opera 9.5-10
  • Safari 3

Плюсы:

  • адекватно работает во всех популярных браузерах;
  • имеет массу различных настроек;
  • легкая по весу и простая в использовании;
  • устойчивость - отсутствие нужных блоков в XTML не вызывает ошибки выполнения js при инициализации плагина.

Минус:

  • пока не найдено красивое решение для динамически изменяющейся ширины галереи при резиновой верстке. Но, может, это завышенное требование?

Выводы:

Хорошая галерея. Почти всегда использую именно ее. Рекомендую.

Материал: