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
Опубликовать в Одноклассники
  • Mark

    Спасибо за туториал, помогло!

  • Роман

    который параметр отвечает за остановку карусели при наведении курсора мыши, а затем за старт карусели ..

    или здесь нет такого???

    • Pavuk

      для остановки jCarousel Lite карусели при наведении курсора надо

      1. Чтобы в параметрах карусели был установлен параметр auto: (как у меня в example2) можно поставить число или true

      2. в оригинальном файле карусели jcarousellite_1.0.1.js после 282 строки перед функцией function go(to) добавить функцию

      $(this).mouseover(function(){
      isMouseOver = true;
      }).mouseout(function(){
      isMouseOver = false;
      });
      

      если используете версию min — замените на полную версию..

      3. в функции function go(to)

      «if(!running)» замените на «if(!running && !isMouseOver)»

      • Роман

        извините — но есть один вопрос — а как сделать для этой карусели ховер эфект.. а то у меня не получается… css — прописаны правильно… а вот реакции 0… хелп …

        • Pavuk

          а что именно должно случаться при наведении ???

          • Роман

            ну есть блок конструкция -ul>

            — и при наведении курсора изображение должно меняться на такое же самое только цветное

  • Роман

    да тут интересний вопрос — а как подружить десколько каруселей ? + чтоби они реагировали на курсор при наведении… а то у меня авто прокрутка работаєт — а вот на курсор реагируєт только вторая карусель

    • Pavuk

      ну так объедините рисунок так чтобы вверху был чёрно-белый, а внизу цветной,
      поместите в тэг

      <li>    <а class="imageclass"><img src="..."> </a></li>

      а в css пропишите чтобы при наведении картинка вверх поднималась, на половину, так чтобы отображался низ цветной
      картинки

      .imageclass{
      width: (m)px; 
      height:(n)px; (высота половины картинки)
      display:block;
      overflow:hidden;
      }
      
      .imageclass:hover{
      margin-top:-(n)px; (поднимаем вверх на половину картинки)
      }
  • Kolass

    Подскажите, а как скрыть левую кнопку, если прокрутка достигла конца и правую, если прокрутка еще не началась?

    • Pavuk

      при достижении конца прокрутки класс кнопки левой или правой меняется на

      button class=next disabled

      или

      button class=prev disabled

      соответсвенно, для того чтобы кнопка не отображалась надо прописать в css свойство класу disabled:

      .disabled{
      display:none;
      }
  • Есть такая проблема. Я сделал так чтобы при наведении слайдер останавливался, но затем у меня перестали работать стрелки. Как сделать так чтобы при наведении слайдер останавливался а стрелки все равно работали?Спасибо!