АДАПТИВНАЯ КАРУСЕЛЬ

+ -
0
АДАПТИВНАЯ КАРУСЕЛЬ


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">


javascript
Для работы плагина в стандартном режиме нужно подключить jQuery библиотеку и сам плагин responsive-carousel:
<script src="jquery.js"></script>
<script src="dist/responsive-carousel.min.js"></script>


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

Скачать исходник:
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Комментариев 0