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

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

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

Подключение плагина 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. Некоторые штуки (например, ленивая загрузка изображений) переманивают на свою сторону.