ТЗ для простого слайдера с минимальным количеством кода

15:50 2022-10-18
ТЗ для простого слайдера с минимальным количеством кода

Слайдер должен быть написан на нативном JS максимально функционально и гибко для использования.

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

https://www.autoparus.by/tour/12

https://www.autoparus.by/tour/46

Там представлены наполнения разными форматами (размерами) изображений.

Надписи на изображениях делать и продумывать их функционал не надо.

Общая суть слайдера:

По умолчанию ширина 100%, но что бы легко ограничивался по ширине каким либо контейнером или какой-то другой оберткой.

Высота:

Простой вариант - Высота по самой высокой фото, те что короткие по центру в вертикали и недостающее пробелы заполнить фоново.

Второй - Высота по самой высокой фото, те что короткие обджект фитом подгонятся через стили.

Третий - самый универсальный - среднее между самым высоким и самым низким и обджект фитом ставим изображения (это самый предпочтительный).

Предусмотреть плавный комфортный промот в вертикальном направлении.

Бесконечная промотка по кругу желательно, но не является важным условием. Если много делов и кода то не стоит ее делать.

CLS (Cumulative Layout Shift) должен быть приближен, а лучше равен нулю и какойто бэкграунд обычный серый фон как у гугла, к примеру.