Можете добавить класс для самого блока слайдера, и через него меня стили точек.
Например
class="slider red-dots"
class="slider"
.slider .dots { стили обычных точек }
.slider.red-dots .dots { стили красных точек }
Никак, или верстай на глаз или требуй psd. Надо было сразу на собеседовании требовать psd или в чем они там работают... Фигма, зеплин, вектор и т.д. Но из pdf верстать это по моему мнение бред
Божечки!!! Это неведомая плавающая "штука", называется - floating label. Что нужно сделать.
1. Заходим на Кодпен
2. Вбиваем в поиск "floating label"
3. Выбираем что Вам угодно, на чистом js, jquery, react, vue, angular, без скриптов...
На таком плагине делал точно такой же слайдер: markdalgleish.com/projects/bespoke.js
Там все элементарно, он проставляет классы на активный, предыдущие и т.д. Любую анимация можно описать на css, хоть за ними, хоть спереди и сзади. Короче, то что доктор прописал.
У меня как-то проще получилось... Я всегда так делаю, тоглю класс. А все стили в css, зачем описывать через js не понимаю... https://codepen.io/hesrun/pen/pOpMVe