CSS Mem Slider

[qeteq]

Task: https://github.com/rolling-scopes-school/tasks/tree/master/tasks/css-mem-slider
Demo: https://qeteq.github.io/cssMemSlider/cssMemSlider
Done: 2022-05-12
Deadline: 2022-05-17
Score: 150/150

Notes:

• Mobile layout used at @media (max-width: 720px)
• Commit timestamps are inside of the commit body:
  

Screenshot:

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

• Запрещается использование CSS-фреймворков (bootstrap, foundation и т.д.)
• Запрещается использование каких-либо js скриптов и нпм пакетов
• Запрещается использование CSS препроцессоров (необходимо использовать только чистый CSS)
• Поддержка браузера Google Chrome

Критерии оценки

• Выполнено всё из секции Требования к репозиторию и как сабмитить задание +30
• Слайдер позиционируется с равными отступами слева и справа +10
• Соблюдено расположение картинок, подписей к ним и контролов +10
• Имеется анимация для смены картинок +20
• Имеется анимация для смены подписей к картинкам +10
• Подписи к картинкам должны быть строковыми значениями (текстом), т.е. текст не должен быть частью картинки +15
• Каждый контрол имеет большую область нажатия, чем размер самого контрола +5
• Контролы имеют интерактивность +10
  • момент наведения
  • момент нажатия
  • активный контрол
  • изменение курсора
• Имеется мобилная версия слайдера и соблюдено расположение картинок, подписей к ним и контролов +20
• Используются относительные едициы измерения для основных блоков (картинки, контролы, подписи) (rem, em, %, vh, vw, fr and etc... ) - присутствует "резиновость" слайдера +10
• Все блоки/составные части слайдера (контролы, картинки, подписи к слайдеру) находя в базовом потоке дом-элементов, не позиционируются с помощью top, left, right, bottom. Не используются псевдоэлементы. +10