Как сверстать такой слайдер?

Question

[Ilya Olovyannikov]

Добрый день!
Подскажите, пожалуйста - как сверстать такой слайдер?
Логика такая:
При вертикальном свайпе левая часть (где картинка) переключается, а правая часть, где текст:
1. Один слайд = один шаг.
2. У следующего слайда скрыт контент, кроме заголовка, контент появляется при активном слайде

Пробовал уже разные слайдеры - swiper, slick, tiny, но у всех какая-то беда с вертикальным скроллом или связкой с другим слайдером или они делают фиксированую высоту для все слайдов или неверно считают высоту макета (точнее в целом верно, но мне нужно другое поведение)

PS. Наш стек React, SCSS, css-modules

Ссылка на макет

Скриншоты слайдера

Answer 1

[AlecsJS]

Дружище, а тебе React здесь зачем?
Он уже свою задачу выполнил - встроил vdom в html)
На js напиши scrollTop, отдельные блоки и части информации также скрывай на vanilla js

Comments

[Ilya Olovyannikov]

Я просто написал стек, если кому-то интересно =)
Были тэги CSS и JS, но модератор посчитал их избыточными почему-то, хотя тут больше про верстку, чем про React)