jCarousel Lite — карусель фотографий

Сегодня я хочу поделиться опытом использования jQuery плагина jCarousel Lite. Он может пригодиться вам при необходимости сделать карусель товаров для интернет-магазина, мини-галерею, или просто красиво отобразить фотографии.

Естественно, чтобы плагин работал, нужно подключить библиотеку jQuery, скачать можно тут.
а также, скачать сам jCarousel Lite.
После закачки добавьте jCarousel Lite:

<script type="text/javascript" src="путь_к/файлу/jcarousellite.js"></script>

и если не подключён jQuery:

<script type="text/javascript" src="путь_к/файлу/имяjQuery(jquery-1.9.1.min).js"></script>

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

<button class="prev">&lt;&lt;</button>
<button class="next">&gt;&gt;</button>
<div class="anyClass">
<ul>
	<li><img alt="" src="ссылка на картинку" width="100" height="100" /></li>
	<li><img alt="" src="ссылка на картинку" width="100" height="100" /></li>
	<li><img alt="" src="ссылка на картинку" width="100" height="100" /></li>
	<li><img alt="" src="ссылка на картинку" width="100" height="100" /></li>
</ul>
</div>

и немного выше блока с картинками код вызова функции jCarouselLite

<script type="text/javascript">// <![CDATA[
$(function() {
     $(".anyClass").jCarouselLite({
         btnNext: ".next",
         btnPrev: ".prev"
     }); });
// ]]></script>

Именно здесь настраивается плагин карусели. Код содержащийся в jCarouselLite({ … }) это параметры плагина.
По умолчанию карусель прокручивается кнопками «влево» и «вправо»

 

Если нужно чтобы прокручивалась больше чем одна картинка, добавьте

scroll: (количество прокручиваемых елементов, одним нажатием кнопки)

в параметры плагина после

btnPrev: ".example .prev"<span style="color: #ff0000;">,</span>

не забыв при этом добавить запятую после этого параметра.
Можно установить авто-прокрутку, если изменить параметры на

<script type="text/javascript">// <![CDATA[
$(function() {
     $(".example .anyClass").jCarouselLite({
        auto: 800,    // время задержки прокрутки в милисекундах
        speed: 1000   // скорость вращения (чем ниже число тем выше скорость и наоборот)     }); });
// ]]></script>

 

 

Другие параметры плагина:

visible: 2 // количество элементов, можно поставить даже дробное число
vertical: true // устанавливает вертикальное положение карусели
circular: false // запрещает прокрутку карусели по кругу.
speed: 800 // устанавливает скорость прокрутки элементов

Больше примеров можно посмотреть на сайте разработчика плагина jCarouselLite.

Я же использовал данный плагин для создания карусели товаров в интернет-магазине проветривателей «Свежий Воздух»
Дополнение функционала, и вёрстку делал тоже я ;).

Рассказать друзьям

Опубликовать в Google Plus
Опубликовать в Одноклассники