Как реализовать такой эффект в слайдере?

Question

[Alma410]

Приветствую. Как реализовать такой эффект в слайдере с линиями и появления текста внизу слайдера.
https://www.amsterdammuseum.nl/
По сути я так понимаю сам слайдер это slider swiper?

Comments

[yarovikov]

По сути я так понимаю сам слайдер это slider swiper?

На основе чего такие выводы?

[MrColdCoffee]

В данном примере: создаётся похожий (новый) блок, анимированно исчезает контент первого, анимированно появляется контент второго, удаляется первый.

Answer 1

[leeroyjenkins176]

Как бы попробовал сделать я:
1) Для навигации по слайдам кликами/свайпом взять хоть тот же swiper. Включить эффект "fade", чтобы слайды лежали в стопке. Отключить transtion для opacity и вместо него сделать transition-property: visibility. Это даст необходимую задержку для будущей анимации появления/исчезновения текста.
2) Сама анимация текста и полосок к слайдеру никакого отношения не имеет. Такой эффект можно сделать с помощью @keyframes
3) Когда анимация готова, активируем её с помощю активного класса который навешивает свайпер на слайды по мере прокрутки.