Адаптивная карусель

jQuery плагин реализующий адаптивную карусель для работы с помощью мыши, касанием или клавиатурой.

Сейчас при поиске различных каруселей для сайта у нас появились новые критерии для выбора. Мы ищем легковесную, резиновую или адаптивную карусель с возможностью управления, как мышью, так и клавиатурой и касанием пальца, а также возможность расширения в различных её реализациях. В интернете множество каруселей, но очень мало отвечают выше приведенным требованиям, а responsive-carousel, которую мы сейчас рассмотрим, как раз полностью удовлетворит все требования.

HTML

Структура простая, состоящая из основного контейнера с классом carousel, внутри которого в дивах должны располагаться элементы карусели:

<div class="carousel">
    <div>
        <!-- carousel item content here -->
    </div>
    <div>
        <!-- carousel item content here -->
    </div>
</div>

По умолчанию стандартная сборка включает переходы slide/drag, которые можно применить, добавив атрибут к контейнеру и подключив дополнительный CSS файл.
Для эффекта slide такой:

<link href="src/responsive-carousel.slide.css" rel="stylesheet">

И атрибут добавляется следующим образом:

<div class="carousel" data-transition="slide">
    <div>
        <!-- carousel item content here -->
    </div>
    <div>
        <!-- carousel item content here -->
    </div>
</div>

CSS

Файл стилей для дефолтной карусели:

<link href="src/responsive-carousel.css" rel="stylesheet">

JS

Для работы плагина в стандартном режиме нужно подключить jQuery библиотеку и сам плагин responsive-carousel:

<script src="jquery.js"></script>
<script src="dist/responsive-carousel.min.js"></script>

Дополнительные возможности

Имеется целый ряд переходов, взаимодействий и отображений в папке src исходника, такие как: fade, touch-draggable slide, flip, autoplay, управление клавиатурой, цифровая навигация по слайдам, и даже расширение, которое автоматически подстраивает количество видимых элементов (слайдов), в зависимости от размеров окна.