Персональный блог Игоря Антонова aka "spider_net"

jCarousel или выбираем карусельку для сайта


Рубрика: Программирование -> JavaScript
Метки: | | | |
Просмотров: 6435
jCarousel или выбираем карусельку для сайта

Не хотел сегодня писать в блог, т.к. весь день прошел за работой над корпоративным проектом, но потом получил письмо от читателя и решил сразу написать ответ в виде отдельной заметки. Вопрос звучал так: «Как ты делаешь карусельки для своих сайтов?». Отвечаю кратко: с помощью jQuery-плагина. Подобных плагинов написано вагон, но я уже давненько подсел на jCarousel.

Плагин jCarousel впервые попался мне на глаза год три назад. Мне понравился его код (ничего лишнего) и возможность беспроблемного кастомайзинга. Все оформление без проблем правится стилям и не требует вмешательства в JavaScript код. Из плюшек стоит выделить:

  • Гибкая настройка;
  • Поддержка пэйджера изображений (список номеров изображений);
  • Адаптивен (responsive);
  • Хороший список событий, на которые можно повесить свои обработчики;
  • Простота использования;
  • Небольшой размер
  • Подключение плагина jCarousel

    Плагин подключается без каких-либо проблем. Все что требуется – наличие jQuery (1.7 и выше) и списка с изображениями, которые будут помещаться карусель. Дальше все просто.

    1.Подключаем плагин.

    <script type="text/javascript" src="/path/to/jquery.jcarousel.js"></script>

    2. Подготавливаем разметку. В списке у нас должны быть все изображения, которые будут крутиться в карусели.

    <div class="jcarousel">
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>

    3. После готовности документа запускаем плагин.

    $(function() {
        $('.jcarousel').jcarousel({
    	//Настройки
        });
    });

    4. Определяем минимальные стили для оформления

    */
    .jcarousel {
        position: relative;
        overflow: hidden;
    }
    /* Контейнер с изображениями */
    .jcarousel ul {
        width: 20000em;
        position: relative;
        /* Optional, required in this case since it's a <ul> element */
        list-style: none;
        margin: 0;
        padding: 0;
    }
    /* Отдельный элемент списка */
    .jcarousel li {
        float: left;
    }

    Вот, пожалуй, и все. Реальные примеры использования jCarousel можно посмотреть на официальном сайте. Помимо jCarousel мне также доводилось работать со slick. Я увидел его в проекте, который мне пришлось дорабатывать. Он тоже responsive, поддерживает swipe, из коробки дружит с клавиатурой (можно перелистывать стрелками) и мышкой, ленивая загрузка изображений и т.д. Обязательно присмотрись и к нему.

    Что выбрать jCarousel или Slick

    Мне нравятся оба решения. В большинстве своих проектов я использовал jCarousel, т.к. познакомился с ним уже давно и он меня во всем устраивает. В новых уже стараюсь использовать Slick. Некоторые штуки (например, ленивая загрузка изображений) переманивают на свою сторону.

    Комментариев: 1 RSS
    Оставьте комментарий!
    comments powered by HyperComments