Как на js делают такие слайдеры?

Question

[Heorhii]

Всем прива, видел я однажды макет с вот таким слайдером, но я ума не приложу как такое реализовать, может есть какие-то библиотеки которые немного похожи, пытался найти решения на codepen, но там всё достаточно отдалённое от того что на скрине, подскажите как такое решали бы вы, в каком направлении смотреть вообще?)

Comments

[dollar]

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

Всё начинается с определения того, что нужно, то есть с описания задачи, потом разбиение её на более мелкие, а потом тупо вбить алгоритм в виде текста программы. Но на самом деле нет ответа, как что-то придумать, кроме как предложить уже готовое решение (но для этого нужно поработать).

[Heorhii]

dollar, спасибо большое, крайне ценные советы

[dollar]

Георгий Городенко, можете, например, почитать про canvas - это способ рисовать что угодно. Можно анимацию. Можно часы. Можно игрушку. Но если вы не программист, то вам будет очень сложно. Хотя бы математику любите? А то судя по картинке там у вас будут синусы и косинусы.

[Heorhii]

dollar, я не о дизайне, сверстать такое не такая уж и проблема, меня интересовала конкретно реализация со стороны джс, ниже человек дал исчерпывающий ответ - грубо, коротко и ясно

Answer 1

[Владимир Проскурин]

В принципе, не так сложно. Достаточно в каждый слайдер поместить два блока - дата и контент. Контент скрываем. И при скролле слайда, поворачивать все слайды через transform: rotate, а тому слайду, у которого поворот будет равным нулю, назначаем класс active, в котором указываем, что нужно показать блок с текстом.
Грубый пример:

UPD: вот так лучше иллюстрирует

Comments

[Heorhii]

То что нужно, благодарю!)

Answer 2

[Илья]

Если есть не скриншот, а ссылка на ресурс с данным элементом - могу попробовать разобраться и объяснить какие технологии и библиотеки используются.

Comments

[Heorhii]

К сожалению это было давно, не знаю почему я тогда не догадался сделать так же, есть что есть :(