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

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

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

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

Проверено в:

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

Что качать?

• библиотеку jquery
• (13.97 Kb) сам плагин.
• или (2.14 Kb) запакованный вариант плагина.
• (2.6 Kb) для поддержки скроллинга колесиком мыши.

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

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

<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()

Самый частый случай — галерея с кнопками и прокруткой колесиком мыши (не забудь подключить 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 — галерея в невидимом блоке

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

Демо-пример

Проверено в:

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

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

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

Демо-пример

Проверено в:

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

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

Для того чтобы научить плагин прокручивать галерею не по нажатию на кнопки, а по наведению на них мыши придется модифицировать 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 при инициализации плагина.

Минус:

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

Выводы:

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

Материал:

• jquery plugin :: jCarouselLite