How to make slides with class change using slick js?

Question

Slick

Friends, Hello everyone. I need your help, because I have been sitting with this problem for the third day.

I have to make a vertical carousel of three slides on the site. Each slide has its own styles (its own colors and different content).

In my case it is 3 slides. Each slide has a height of 100vh and its own class according to the background: . orange-bg , green-bg and purple-bg .

I need to use slick.js (they asked to use only this library) so that the user scrolls one slide at a time, and on a specific slide, the corresponding class is added to the body tag ( orange-bg , green-bg and purple-bg )
When the user reaches the last slide, he needs to show the footer.


Help me please