Как сверстать такие слайды (Идеи, советы)?

Question

[maralov]

Всем привет. Возник небольшой ступор в верстке блока со слайдером. Навигацию и сам слайдер проблем не вызывают, там свяжу с помощью флика два слайдера.
А вот иконки на слайде все должны быть кликабелиным - по клику в блоке снижу появляется соответствующее описание и заголовок блока. В принципе и тут более мене понятно - думаю или брать их и подставлять туда с дата атрибутов или скрытые блоки.

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

Слайд1

Слайд2

Моб

Answer 1

[Арсений Матыцин]

1. Чтобы иметь возможность ловить события именно объектов, а не квадрата картинки, используй SVG.
2. Тень рисовать можно ее же средствами.
3. Используй svg-спрайты, это позволит снизить фактор жопоболи при перестройке.
4. В чем сложность использовать медиазапросы при постройке я, если честно не понял, располагаешь элементы (острова) один под одним (тупо дивы), а на десктопе позиционируешь абсолютно. Главное не накосячить с z-index-ом.

Comments

[maralov]

Я ничего не говорил про проблемы с медиа запросами, ныряни наверное только ёж не понимает про аддаптив с медиа.. и также я писал что мысли позиционировать их (все кроме центрального) относительно ... думал может найдутся шарики чтобы не становилось боль при уменьшени контейнера на меньших экранах (макет десктоп ферст начинаю с 1920пкс нарисован). Спасибо за комментарий =)

Answer 2

[n1ksON]

Как вариант, можно что-то нахимичить с тэгом map.

Comments

[maralov]

оО интересно, даж не слышал про такой) почитаю про него, поищу примеры, спасибо за вариант

[Rustam Bainazarov]

maralov, а лучше воспользоваться SVG.

[maralov]

прикольная вещь, но не совсем подходит так как картинка не сплошная, а каждая иконка отдельная должны быть(тень и перестроение на адаптиве)

[maralov]

Рустам Байназаров, не совсем пойму как. или точне чем это поможет. все картинки в свг у меня...

[Rustam Bainazarov]

maralov, если вы откроете SVG — там код и разметка. Если вы её встроете inline, то вы сможете ей управлять, вешать ссылки, события и т. д.

[maralov]

да я знаком с содержание свг, если не сложно на пальцах =) из плюсов вижу что можно при наведении довить и тень (которой по умолчании нет под иконками, но с позиционированием не очень понимаю выгоду...

[Vaultboy84]

Со всем знаком, все знает, но в ступоре... Чувак какие проблемы то тогда?