jCarousel Lite

jCarousel Lite — классная, простая но в то же время очень гибкая карусель с отличной документацией. Но всё же мне есть что чиркнуть в шпаргалку.

Подключается просто.
Делаем раз — подключаем нужные скрипты



Делаем два — готовим HTML-структуру для карусели



        

Тут немного остановлюсь подробнее. Здесь две кнопки имеют классы prev и next. Эти классы мы будем использовать ниже. А также div класса anyClass.

Шаг три — инициализируем карусель на всё это дело

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

Тут мы указываем селекторы собственно блока с изображениями и кнопок вперёд-назад. Понятно, что вместо кнопок можно (и нужно) использовать картинки по-вкусу.

===================
До сих пор я практически один-в-один перепечатал мануал. А теперь откроем закулису. То чего нет в мануалах, но на что нужно обратить внимание.

1. Размер изображений.
Обратите внимание, на шаге 2 автор явно указал размер изображений. И это не просто так. Если не указать — то разнокалиберные изображения будут смотреться очень некрасиво. Да и вообще, советую лучше заранее подобрать изображения одинаковых пропорций. Так ваша галерея будет смотреться красиво и гламурно, а вам будет меньше головной боли.

2. Если в галерее мало изображений….
Если изображений настолько мало, что они легко умещаются в строчку и даже место остаётся, то галерея будет глючить-дрыгаться-прыгать и т.д.
Чтобы этого избежать можно запретить цикличную прокрутку

circular: false

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

3. Обработка клика на изображения
Тут нет ничего заумного. Просто юзайте jquery. Присвойте удобный селектор изображениям и назначайте обработку клика. Штатного обработчика клика у плагина нет.

Как-то так

jCarousel Lite: 17 комментариев

  1. Neolot

    Карусель толковая, но до ума не доведена, приходилось править код, чтобы работала нормально.

  2. altesack Автор записи

    Любопытно, а что именно правили?

  3. Neolot

    @ altesack:
    Например, если visible выставлен 4, а картинок только 2, то их вообще не видно, они почему-то находятся за пределами зоны видимости.

    visible: 8,
    scroll: 1,
    auto: 3000,
    speed: 400

  4. altesack Автор записи

    Ага. Как раз для из-за этого я делаю
    circular: false
    Тогда всё встаёт на место.

  5. Neolot

    @ altesack:
    В моем случае циркуляция нужна, поэтому пришлось править.

  6. Уведомление: Проблема с шириной блока в jCarousel Lite « Блог о CMS

  7. Вова

    C текстом это js работает. С чем угодно работает.
    Есть и у меня вопрос. Можно ли эту карусель заставить крутиться сверху в низ?

  8. altesack Автор записи

    Можно. Просто почитайте доку.

  9. Оля

    @ Neolot:
    У меня такая же проблема на сайте. Поделитесь опытом что именно правили. картинки в карусели отображаются изначально за пределами видимости. в то же время картинок может быть много — поэтомому отключить циркуляцию нельзя. Поделитесь опытом — а то уже не знаю где искать и где править.

  10. altesack Автор записи

    @ Оля:
    Не совсем понял проблему. Можно подробнее?

  11. Оля

    @ altesack:
    есть сайт пока на домене rtd.agtest.net — вот там в разделах используется как раз jCarousel Lite — зайдите например в горизонтальные жалюзи — увидите нижнюю карусель пустой, а если понажимать на стрелки — тогда появляются картинки. Изначально при загрузке страницы все эти картинки находятся за пределами области карусели.

  12. Дмитрий

    У меня есть необходимость разместить 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);
    });
    но вот как понятия не имею (((. Прошу помочь!

Комментарии запрещены.