CSS Mem Slider

Слайдер с мемами, разработанный на чистом CSS

Моя роль

Создал дизайн и разработал слайдер согласно всем UX/UI и техническим требованиям, используя только CSS

UX/UI требования

Пример десктопной версии:

Пример мобильной версии:

• Соблюсти расположение блоков (картинки, контролы, подписи) как в примерах выше
• Слайдер позиционируется с равными отступами слева и справа
• Имеется анимация для смены картинок по клику на контролы
• Имеется анимация для смены подписей к картинкам по клику на контролы
• Подписи к картинкам должны быть строковыми значениями (текстом)
• Каждый контрол имеет большую область нажатия
• Контролы имеют интерактивность (момент наведения, момент нажатия, активный контрол, изменение курсора)
• Имеется мобильная версия слайдера
• Присутствует "резиновость" слайдера
• Дизайн на усмотрение разработчика
• Подбор мемов на усмотрение разработчика

Технические требования

• Запрещается использование CSS фреймворков (bootstrap, foundation и т.д.)
• Запрещается использование CSS препроцессоров (необходимо использовать только чистый CSS)
• Запрещается использование каких-либо js скриптов и npm пакетов
• Запрещается использование псевдоэлементов (псевдоклассы можно)
• Запрещается позиционирование position и float, все блоки слайдера (контролы, картинки, подписи к слайдеру) находятся в базовом потоке dom-элементов
• Необходимо использовать только относительные единицы измерения rem, em, %, vh, vw, fr и тд
• Разрешается/допускается использование px для медиавыражений
• Разрешается/допускается использование reset.css и normalize.css