Сегодня хочу рассказать как сделать эффектную самопрокручивающуюся ленту изображений. Она выглядит как баннеры с автосменой. Может, вы захотите разместить таким образом ссылки на спецпредложения в магазине или ссылки на последние посты? Как бы то ни было, я научу как это делать. Это очень легко.

Что нам понадобится

• jQuery
• jcarousel lite
• Изображения

И все. Где взять jQuery я думаю, все знают. А jcarousel Lite я нагуглил за вас. Я долго искал плагин, который позволит мне быстро и без проблем, без гигантских объемов кода и хитрых премудростей сделать такой простой эффект. И я нашел его и очень рад этому. Фактически, этот пост я пишу еще и для себя, как закладку, чтобы заглянуть сюда когда в следующий раз потребуется сделать галерею изображений с автоскроллом.

Пишем html для ленты изображений

Тут классика. Используем список ul и оборачиваем его в div. На этот див мы будем натравливать плагин, так что ему нужен идентификатор. В моем случае это класс.

<div class="mycarousel">
	<ul>
		<li><img src="/img/sample/palm-s.png" alt="пальма"/></li>
		<li><img src="/img/sample/malinka-s.png" alt="малина"/></li>
		<li><img src="/img/sample/blue-sea-s.png" alt="Морько"/></li>
		<li><img src="/img/sample/4cherries-s.png" alt="Вишенки"/></li>
		<li><img src="/img/sample/palm-s.png" alt="пальма"/></li>
		<li><img src="/img/sample/malinka-s.png" alt="малина"/></li>
		<li><img src="/img/sample/blue-sea-s.png" alt="Морько"/></li>
		<li><img src="/img/sample/4cherries-s.png" alt="Вишенки"/></li>
	</ul>
</div>

Важно чтобы изображения были одного размера. Иначе будет смотреться не так эффектно. Поэтому придется напрячься и обработать их.

Готовим JavaScript для карусели изображений

Нужно подключить jQuery. Как это сделать, думаю, все знают. А еще нужно подключить библиотеку jcarousel Lite. Она все и делает.

После загрузки страницы, нужно натравить плагин на нашу ленту изображений и произойдет чудо!

<script type='text/javascript' >
$(function()    {
    $(".mycarousel").jCarouselLite({
		auto: 2000,
		speed: 1000,
		circular: true,
		visible: 4
    });
});
</script>

Это все! Реально. Больше ничего не нужно. Не нужно подключать и настраивать темы. Не нужно делать какие-то контролы и писать дополнительный код. У вас есть стандартный код списка изображений и единственный вызов плагина с параметрами. Это так, как должно быть. Я в восторге, если честно.

О возможных параметрах и их значениях можно прочитать в оригинале на страничке плагина. Ну а я вкратце переведу вам что зачем.

Возможные параметры галереи

btnPrev - идентификатор, определяющий кнопку "Назад". Это нужно если вы делаете управление прокруткой с помощью кнопок.

btnNext - идентификатор для кнопки "Вперед".

btnGo - вы можете сделать переход по номерам элементов. При клике на какой-то элемент, карусель должна быть проскроллена на определенный итем. Подробнее написано в документации.

mouseWheel - true/false значение, определяющее будет ли карусель прокручиваться от скролла мышки. Требует плагин mousewheel.

auto - true/false значение, определяющее будет ли лента крутиться сама.

speed - скорость прокрутки в милисекундах.

easing - эффект прокрутки. Можно сделать эффект подпрыгивания. Требует плагина easing.

vertical - может нужно, чтобы картинки крутились вертикально?

circular - будет ли лента останавливаться по достижении последней картинки или будет крутиться по кругу?

visible - сколько элементов видно

start - с какого элемента начинать

scroll - по сколько элементов прокручивается

beforeStart - callBack функция, вызывающаяся до начала анимации

afterEnd - callBack функция, вызывающаяся в конце анимации

Такие дела. Пользуйтесь!

А я закончил конкурс на блоге фаната футболок и скоро напишу о нем отчет.