Как реализовать подобный слайдер для двух картинок?

Question

[Vitaly Max]

Есть вот такой блок, подскажите, как реализовать подобное? Чтобы по клику на название одна картинка заменялась другой, и та первая уходила на второй план и наоборот.

Comments

[ProjectSoft]

Из Javascript здесь только смена классов (не)активной кнопки и (не)активной картинки.
Всё остальное - CSS (transform, transition or animation)

[Vitaly Max]

ProjectSoft получается по клику на кнопку должен происходить toggle class типа active для кнопки и для картинки. У активной картинки position: absolute, transform: scale(1) например.. а у неактивной те же свойства с другими значениями.. так примерно думаю

[ProjectSoft]

Построение слайдера тут уже как бы вы реализовываете.
К примеру.
Контейнер - высота 0 px Нижний padding в процентах.
Картинки в абсолюте, центрируете (всё это на чистом css) Высота 100%. object-fit - не забываем.
Для неактивной с помощью трансформации смещаете, масштабируете, и т. п.
А дальше чистая анимация на CSS.

[Vitaly Max]

ProjectSoft можешь пояснить для чего делать 0 высоту и задавать паддинг в %?

[ProjectSoft]

Vitaly Max, Это финт адаптивной высоты блока в соотношениях.
Например, такое используется в Bootstrap для встраивания видео.
Я к этому добавляю явное указание высоты 0.

Answer 1

[Максим]

Ну если только из двух : https://codepen.io/topicstarter/pen/zYGwROG

Comments

[Vitaly Max]

спасибо, прям как будто для меня)) только картинки не ресайзятся))

[Максим]

Vitaly Max, сделал

[Vitaly Max]

Максим Ленский спасибо!