3D карусель изображений

Данный вариант карусели не требует каких либо плагинов и занимает всего 2.5кб (CSS + JS)

Прницип работы данной карусели заключается в том, что все изображения в ней равномерно размещаются по кругу:

А далее происходит ее движение в одну или другую сторону

Примеры:

3 фотографии:


6 фотографий:


10 фотографий:


10 фотографий с промежутком 20px:


12 фотографий с промежутком 20px и скрытыми задними:

Установка:

HTML:

Для добавления промежутков между фотографиями для блока карусели используется атрибут data-gap, например:

<div class="carousel-3d" data-gap="20"> (расстояние 20 пикселей)

Чтобы скрыть тыловые фотографии используется атрибут data-bfc, например:

<div class="carousel-3d" data-bfc>

CSS:

JavaScript:

Автор карусели и оригинальная статья: Giulio Mainardi

Я лишь обернул фотографии в тег <div></div> для больших возможностей, например, для добавления ссылки или текста на изображение.

Фотографии: kellepics

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!