Доброго времени суток, коллеги!

Стоит задача написать следующий компонент. В props компонента передается JSON:

[
. . { id: 1, name: "Name1", photo: "/images/1.png" }
. . { id: 2, name: "Name2", photo: "/images/2.png" }
. . { id: 3, name: "Name3", photo: "/images/3.png" }
. . { ... }
]

Компонент на основе этих данных генерирует карусель как на прикрепленном скрине. Карусель должна быть адаптивной - хорошо смотреться на всех разрешениях экранов.
Элемент который находится в левой части экрана, является активным. Он увеличен в размерах.

Если переместить (мышью или пальцем на сенсорном экране) на его место другой элемент, то этот элемент становится активным вместо предыдущего (сразу в момент перемещения на эту позицию).
То же происходит и при клике(нажатии) на другой элемент.

В момент отпускания мыши/пальца, если активный элемент сменился - передать в console.log id нового активного элемента.

Я плачу деньги за выполненную работу, а не за потраченное время. Если вы не справились с задачей - оплаты не будет. Поэтому трезво оценивайте свои способности, прежде чем писать отклик. Два человека до этого смогли справиться с задачей только частично.

Если готовы бросить вызов этой задаче - пишите. Проявите себя - будут ещё задачи.