jCarousel Lite – классная, простая но в то же время очень гибкая карусель с отличной документацией. Но всё же мне есть что чиркнуть в шпаргалку.
Подключается просто.
Делаем раз – подключаем нужные скрипты
1 2 | <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jcarousellite.js"></script> |
Делаем два – готовим HTML-структуру для карусели
1 2 3 4 5 6 7 8 9 10 11 | <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> |
Тут немного остановлюсь подробнее. Здесь две кнопки имеют классы prev и next. Эти классы мы будем использовать ниже. А также div класса anyClass.
Шаг три – инициализируем карусель на всё это дело
1 2 3 4 5 6 | $(function() { $(".anyClass").jCarouselLite({ btnNext: ".next", btnPrev: ".prev" }); }); |
Тут мы указываем селекторы собственно блока с изображениями и кнопок вперёд-назад. Понятно, что вместо кнопок можно (и нужно) использовать картинки по-вкусу.
===================
До сих пор я практически один-в-один перепечатал мануал. А теперь откроем закулису. То чего нет в мануалах, но на что нужно обратить внимание.
1. Размер изображений.
Обратите внимание, на шаге 2 автор явно указал размер изображений. И это не просто так. Если не указать – то разнокалиберные изображения будут смотреться очень некрасиво. Да и вообще, советую лучше заранее подобрать изображения одинаковых пропорций. Так ваша галерея будет смотреться красиво и гламурно, а вам будет меньше головной боли.
2. Если в галерее мало изображений….
Если изображений настолько мало, что они легко умещаются в строчку и даже место остаётся, то галерея будет глючить-дрыгаться-прыгать и т.д.
Чтобы этого избежать можно запретить цикличную прокрутку
1 | circular: false |
Будет смотреться уныло, но безглючно. Если ваша карусель может содержать то много то мало изображений, то вам надо будет то вставлять эту строчку, то убирать, например, средствами PHP.
3. Обработка клика на изображения
Тут нет ничего заумного. Просто юзайте jquery. Присвойте удобный селектор изображениям и назначайте обработку клика. Штатного обработчика клика у плагина нет.
Как-то так
Нет постов по теме.
RSS-подписка
Карусель толковая, но до ума не доведена, приходилось править код, чтобы работала нормально.
Любопытно, а что именно правили?
@ altesack:
Например, если visible выставлен 4, а картинок только 2, то их вообще не видно, они почему-то находятся за пределами зоны видимости.
visible: 8,
scroll: 1,
auto: 3000,
speed: 400
Ага. Как раз для из-за этого я делаю
circular: false
Тогда всё встаёт на место.
@ altesack:
В моем случае циркуляция нужна, поэтому пришлось править.
[...] Тут я писал про классную карусель jCarousel Lite. Классная-то классная, но иногда она неправильно определяет ширину блока. Точнее совсем не определяет, а ширину элемента списка (тег <li>) устанавливает в ноль. [...]
C текстом это js работает. С чем угодно работает.
Есть и у меня вопрос. Можно ли эту карусель заставить крутиться сверху в низ?
Можно. Просто почитайте доку.
@ Neolot:
У меня такая же проблема на сайте. Поделитесь опытом что именно правили. картинки в карусели отображаются изначально за пределами видимости. в то же время картинок может быть много – поэтомому отключить циркуляцию нельзя. Поделитесь опытом – а то уже не знаю где искать и где править.
@ Оля:
Не совсем понял проблему. Можно подробнее?
@ Оля:
Вот модифицированная версия http://pastebin.com/pALiMRY3
@ altesack:
есть сайт пока на домене rtd.agtest.net – вот там в разделах используется как раз jCarousel Lite – зайдите например в горизонтальные жалюзи – увидите нижнюю карусель пустой, а если понажимать на стрелки – тогда появляются картинки. Изначально при загрузке страницы все эти картинки находятся за пределами области карусели.
@ Neolot:
меня спасет просто замена http://pastebin.com/pALiMRY3 на то что у меня сейчас прописано?
@ Оля:
Ага. Понял ))
@ Оля:
Должно, смотрите по ситуации
попробую – надеюсь поможет.
У меня есть необходимость разместить 2-3 таких галереи на одной странице (пример http://bellecopine.ru/gal.html). При прокрутке колесом мышки все как нужно, но при клике вперед или назад прокручиваются обе галереи. Я не далеко не спец в скриптах. Как понимаю нужно использовать оператор this, тут
if(o.btnPrev)
$(o.btnPrev).click(function() {
return go(curr-o.scroll);
});
if(o.btnNext)
$(o.btnNext).click(function() {
return go(curr+o.scroll);
});
но вот как понятия не имею (((. Прошу помочь!