Что такое jCarousel Lite при помощи jQuery?

Всем привет, давайте рассмотрим что такое jCarousel Lite? Если быть точнее, то это jQuery плагин, при помощи которого можно создать карусель заполненную изображениями и HTML текстом. Проще говоря, при помощи этого виджета вы можете перемещать изображения и (или) HTML текст в виджете выполненном в стиле карусели. Этот виджет очень легкий и имеет супер легкий вес, примерно в 2 кбайта , но очень гибкий и настраиваемый, чтобы удовлетворять большинство наших потребностей.

jCarousel Lite не является заменой для плагина jCarousel, скорее всего он является легкой альтернативой для пользователей, основной упор делается не на создание полномасштабной галереи изображений. Из-за своей легкости, его можно использовать под любые нужды, к примеру если у вас есть какие-то новости, то их можно заключить в плагин, и это будет очень интересно и красиво.

Ну да ладно, на этом остановим пиар этого плагина и приступим к его установке, установка очень проста и мы уложимся в три шага:

Шаг 1:

Для начала нам нужно подключить ссылки на библиотеку jQuery и плагин jCarouselLite. Вы можете скачать jQuery и jCarouselLite соответственно здесь и здесь. Если вам нравятся интересные эффекты, то вы можете подключить облегченную версию плагина, это конечно по желанию. Также если Вам хочется чтобы карусель передвигалась при помощи колеса мышки, то нужно скачать этот плагин и соответственно его подключить.

<script src=»path/to/jquery.js» type=»text/javascript»></script>
<script src=»path/to/jcarousellite_1.0.1.js» type=»text/javascript»></script>

<!— Облегченная версия —>
<script src=»path/to/easing.js» type=»text/javascript»></script>
<!— Навигация колесиком мышки —>
<script src=»path/to/mousewheel.js» type=»text/javascript»></script>

Шаг 2:

Теперь нам нужно внести необходимый код в самом файле HTML, сделать необходимые разметки для нашей будущей карусели. Необходимо также прописать кнопки навигации, но эти кнопки не должны быть частью самой карусели. Пример кода:

<button class=»prev»> <- </button>
<button class=»next»> -> </button>

<div class=»anyClass»>
<ul>
<li><img src=»someimage» alt=»" width=»100″ height=»100″ ></li>
<li><img src=»someimage» alt=»" width=»100″ height=»100″ ></li>
<li><img src=»someimage» alt=»" width=»100″ height=»100″ ></li>
<li><img src=»someimage» alt=»" width=»100″ height=»100″ ></li>
</ul>
</div>

Шаг 3:

Теперь нам нужно добавить в код документа функцию вызова плагина и кнопок навигации. Вот пример кода:

$(function() {
$(«.anyClass»).jCarouselLite({
btnNext: «.next»,
btnPrev: «.prev»
});
});

Ну вот и готова наша карусель, приятных вам каруселей. Ах да, если вы разбираетесь в HTML, то можете слегка поэкспериментировать с дизайном и оформлением карусели.