Пример реализации такого слайдера?

Question

[MegaPuxapb]

Нужно запилить такой вот слайдер.

Картинка подставляется в "монитор", с последующим проигрыванием видео, с сохранением контуров монитора.
Стоит ли это делать на slick slider - е? может есть примеры реализации?

Comments

[Ankhena]

У слика в слайде может быть что угодно, в том числе фон, в виде сердечка, покемонов, мониторов и т.д. А также абсолютно-позиционированные элементы, картинки, видео, текст..

Выложите свой код в песочницу и опишите, что именно не получается.

[MegaPuxapb]

Ankhena, ничего пока не получается, выкладывать нечего)
Как монитор туда прикрутить? фоном? если фоном то как по его контуру слайд обрезать?
такая фигня получается:

[Ankhena]

MegaPuxapb, уголки скругляются свойством border-radius
https://jsfiddle.net/qaj09hL1/

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

Answer 1

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

Стоит ли это делать на slick slider - е?

да, почему нет? По сути тут просто для среднего слайда наложен сверху монитор с прозрачной дыркой в центре

Comments

[MegaPuxapb]

экран у монитора с закруглением, и сверху хрень, типа камеры. Нужно это как то с z-index ом делать. Что б что не влезло, то пропадало.
короче говоря, как его так наложить?

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

MegaPuxapb, абсолютное позиционирование и z-index