- npm install
- npm start
Реализовать следующий блок в соответствии с макетом
-
Блок содержит информацию о временных отрезках, в каждом из которых существует несколько событий.
-
При переключении временных отрезков изменяются соответствующие числа и под ними показывается новый слайдер, который содержит подробную информацию по ключевым событиям на активном временном отрезке.
-
Возможно существование от 2 до 6 временных отрезков. Все интерактивные точки на окружности располагаются на одинаковом расстоянии друг от друга
-
Весь блок стоит сделать независимым от другой логики на странице. Например, если добавить на страницу ещё один такой же блок, верстка и логика работы этих блоков не будет нарушена
Демонстрация работы блока - пример с максимальным количеством временных отрезков
Все существующие в макете линии — это не разметочная сетка, а часть верстки
-
Необходимо использовать Typescript
-
Можно использовать React.js или нативный JS на Ваш выбор
-
В случае использования нативного JS, можно воспользоваться любым удобным для - Вас HTML-шаблонизатором или обычным HTML
-
Стилизация с использованием SASS/SCSS (В случае работы с React.js, возможно использование styled-components)
-
Сборка проекта с помощью Webpack
-
Для работы со слайдерами необходимо использовать библиотеку Swiper
-
Для реализации js-анимаций можно использовать библиотеку gsap
-
Не использовать JQuery
-
Не использовать Bootstrap, Tailwind и т.п.
-
Не использовать библиотеки с готовыми UI-компонентами такие, как MaterialUI, AntDesign и т.п.
Выполненное задание необходимо прислать в виде ссылки на git-репозиторий. Актуальная версия кода должна находится в основной ветке.
Файл README.md должен содержать инструкцию по запуску проекта