Responsive Carousel: простой слайдер-карусель для веб-страницы


Responsive Carousel — простой мультислайдер-карусель, позволяющий в режиме слайд-шоу менять на веб-странице изображения или другие HTML-элементы. Кроссбраузерный. Лицензия: GPL. Сайт: github.com/filamentgroup/responsive-carousel


Очень часто хотелось бы видеть на своей веб-странице такую форму содержания как слайды. То есть когда набор изображений или другие какие-нибудь блоки веб-страницы менялись как слайд-шоу автоматически или вручную через управляющие стрелочки. Такие элементы слайд-шоу на веб-сайте получили название слайдеров или каруселей.

Рис. carousel
Рис. carousel

В идеале слайдер должен быть в виде отдельного HTML-тега типа slader или даже отдельного формата изображений. Но пока такого элемента нет, а имеется большое количество «костылей» в виде библиотек JavaScript, с помощью которых и реализуется эффекты «карусели» для картинок и прочих HTML-элементов.

В связи с переходом на Markdown и всеобщим злоупоnреблением скриптами на веб-сайтах автор статьи потерял интерес к JavaScript. Тем не менее ограниченное использование JavaScript вполне допустимо.

Хорошим примером такой библиотеки является Responsive Carousel. Как и большинство подобных библиотек, Responsive Carousel основан на общей библиотеке JQuery, которую тоже нужно подгрузить на веб-страницу, где должен быть слайдер.

Но в отличие от большинства подобных библиотек Responsive Carousel обладает приятным качеством как мультислайдерность. То есть на страницу без модификации JavaScript-кода и дополнительной инициализации каждого слайдера можно вставить несколько каруселей.

Примеры работы библиотеки Responsive Carousel.

Ⓜ ⬇ 2014-05-25