Подскажите как сверстать слайдер

Горите в аду дизайнеры, не имеющие хотя бы базовых знаний HTML и CSS.
Пыталась выпытать у дизайнера где он видел подобный слайдер, но он не сознался...

Думаю, все поняли сложность в чем заключается? Рамку в виде background и z-index не проблема сделать поверх слайдов. Но как сделать, чтобы не было видно из-за прозрачности слайды в местах боковых впадин?
На ум приходят реализации с использованием примитивных костылей... Может кто видел такой слайдер в живую?

WebAir, только накладывать поверх. А выглядит вообще жутковато.

Вот это сюрприз! :P

1) Абсолютное позиционирование поверх фона
(особенно весело, если адаптивно попросили сделать)

2) Сменить эффект
В ТЗ написано что это slide? Может это fade? Объясните заказчику и дизайнеру, что слайды для этого слайдера теперь нужно "готовить" вырезая полукруги по бокам

3) Как факультатив рекомендую почитать про обтравочные маски
посилання

А потом объясните, что если убрать эту полупрозрачность, которая в данном случае ни эстетики, ни стиля не добавляет, то сократится код, повысится "процент кросс-браузерности" и т.д.


РЕЗЮМЕ: НАДО СМОТРЕТЬ НА МАКЕТ ПРЕЖДЕ ЧЕМ БРАТЬ В РАБОТУ

Цитата ("WebAir"):

Может кто видел такой слайдер в живую?

посилання - Один из чьих-то шаблонов, но здесь всё просто.

Цитата ("WebAir"):

Горите в аду дизайнеры

Прежде чем искать крайнего, надо думать, готовы ли сами реализовать проект.
Дизайнер , тупо дал скачанный шаблон слайдера посилання

Похожие в работе:
посилання
посилання
посилання

Цитата ("tuls"):

слайды для этого слайдера теперь нужно "готовить" вырезая полукруги по бокам

Тут посилання не вырезались

Ma_Rgo, ваши ссылки - вообще не на эту тему (особенно вторая и третья - там фон однородный). Здесь что-то похожее посилання , но как быть если позиция слайдера на странице может меняться в зависимости от кол-ва контента сверху? Тогда подобрать полукруглый фон не получится. Так что только вырезать полукруги из слайдов.

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

Было решено на рамке в полукругах закрасить цветом фона сайта. А стрелки будут поверх рамки. Слава богу, что вверху слайдера нет контента и расположение будет статичным.
Спасибо всем участвовавшим в консилиуме

WebAir, я вас на 2 мин опередил))

WebAir, бедные разработчики где-то лишний overflow:hidden засунули так что у меня с телефона видно только левую половину сайта :-)

WebAir, жаль что кусочек только - вот бы все посмотреть - что это за тряпочки цветные на фоне люка?!

Хе хе, справилась - bavosa(.)ru
Не будем оценивать само качество верстки сайта, ибо пока не готово всё.

Цитата ("WebAir"):

Хе хе, справилась - bavosa(.)ru

Я уже вижу вторую вашу тему про "дизайнеров в аду", мое мнение: справиться - не значит, проклиная дизайнеров, лепить костыли на сайты заказчиков.
(Ваше решение - костыль, в какой цвет его ни крась - поменяет заказчик фон и дальше? а если фон будет не с затемнением, а орнаментом?)

А чуть больше времени уделить анализу макетов и psd-файлов.
Хотя так или иначе - придет с опытом

tuls, В чем костыль то?

В том, что если вместо рыбы будет жираф, то черный фон под кнопками может выглядеть плохо.
Как заказчик я требовал бы либо корректного решения задачи, либо (что вероятнее), попросил бы дизайнера немного переделать макет, ведь, если кнопки будут за рамкой - сути это не изменит.