Как бы вы сверстали этот блок?

Question

[Mak_Pet]

Раньше делал подобное через слайдер. Менялся контент в большом квадрате, навигацию реализовал путем убирания стилей у "точек" слайдера и добавления в них текста. Может быть кто-то подскажет другой вариант и поделится опытом. Так же буду благодарен если есть видео с примерами верстки таких блоков.

Comments

[Сергей delphinpro]

Вообще-то это обычно делается как фильтр — выбираешь категорию, показываются плитки из нее.
Простейшая реализация https://codepen.io/delphinpro/pen/oweQqg
В более сложных вариантах — по такому же принципу, но с анимашками и т.п.

Answer 1

[WapSter]

Обычные табы https://medium.com/@wangel13/pure-javascript-tabs-...
Еще можно путем подмены контента.

Comments

[Mak_Pet]

Большое спасибо, способ с табами очень интересный, все должно быть гораздо проще. Можно еще где-то почитать за подмену контента?

[Одиночка Айс]

Mak_Pet, выводите все содержимое сразу, потом на js считываете data-параметр у каждой ссылки и показываете только те плитки, у которых он тоже есть. Если нажали на "Показать все", то data-параметр игнорируется. Ну, как вариант.

Answer 2

[Алекс Глебов]

https://isotope.metafizzy.co/

Answer 3

[lagudal]

вот реализация с ненавязчивой анимацией, на флексах
https://codepen.io/dantilse/pen/oLvVeZ
Картинки некоторые недоступны, ну да заменить не проблема.

Comments

[Mak_Pet]

Стянул пример себе на локаль, но до конца переделать под себя JS не получается можете в этом помочь?

[Mak_Pet]

Как адаптировать данный код под мой html?