Как реализовать данную верстку?

Question

[Антон Плашкевич]

здравствуйте есть блок ( картинка будет бэкграудом) на нем будет несколько баттонов, при нажатии на баттон появляется поверх этого бэкграунда слайдер с картинкой ( название и описание) , так же на этом слайдере можно переключать слайды при помощи навигации ( красных баттонов) , подскажите как данное можно реализовать? есть ли готовый плагин или придется писать все в ручную на js? Буду благодарен за любые дельные советы

Answer 1

[Максим Тимофеев]

Любой слайдер подойдет. Баттоны- это dots, позиционируем их абсолютно, раскидываем по экрану, при первом переключении, ставим справа.

Comments

[Антон Плашкевич]

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

[Максим Тимофеев]

Антон Плашкевич,
Не могу понять к чему Вам комментарий.
Вы спросили:

есть ли готовый плагин или придется писать все в ручную на js?

я ответил
Вас чем-то не устраивает взять готовое? Тогда зачем вопрос задавали?

[Антон Плашкевич]

Максим Тимофеев, будьте добры какой лучше слайдер использовать для данной реализации, и хотел бы уточнить с dots как именно мне их расположить, на сколько я понял, dots есть в слайдере так? получается я их располагаю обсолютами и вешаю на них js обработчик, при клике на dots, вылазит слайдер поверх нашего бэкграунда или перемещаеться к нашему слайдеру и после того как это произошло dots ставяться все с права?

[Максим Тимофеев]

и вешаю на них js обработчик

зачем, они и так в любом слайдере имет обработчик, который листает слайды.

слайдеры:
kenwheeler.github.io/slick
https://owlcarousel2.github.io/OwlCarousel2/
fotorama.io

вылазит слайдер поверх нашего бэкграунда

наверное проще иметь картинку в качестве первого слайда, а не бэкграунд

[Антон Плашкевич]

Максим Тимофеев, извините хотел уточнить последний вопрос, когда мы раскидали dots аболютами по бэкграунду, при клике на один из них, чтобы они стали в ряд с права это нужно делать по средствам js как я понял?

[Максим Тимофеев]

Антон Плашкевич, да, все что с событиями (а клик это событие) - делаем с помощью js.