Как реализовать «кривой» слайдер с прозрачной пунктирной рамкой?

Question

[Кирилл Кириллов]

Привет всем! Встал вопрос, как реализовать такой слайдер:

Ссылка на картинку: https://hkar.ru/QyXJ



Что-то я туплю... может у кого есть какие-нибудь мысли. Сверху должно быть что-то вроде маски, как я понимаю, через которую просвечивается картинка самого слайдера в прозрачном борделе. Как можно такое сделать? Ну и плюс еще то, чтобы он "кривой" такой же был.

Comments

[Ирина Кириллова]

Подскажите, пожалуйста, удалось реализовать данный слайдер? Выбрала данный макет для тренировки и тоже ломаю голову с этим слайдером. Понять понимаю, а вот воплотить не удается.

Answer 1

[Алексей Скляров]

У вас так и есть, есть прозрачная картинка, которая по краям имеет пунктир. Под эту картинку подкладывается слайдер.

Comments

[Кирилл Кириллов]

Я хотел без картинки обойтись... или никак?

[Алексей Скляров]

Кирилл Кириллов: я полагаю что можно потратить не один час на то чтобы средствами css сделать такое, но зачем? добавили маску и все

[Кирилл Кириллов]

Алексей Скляров: Ок, спасибо!

Answer 2

[Localhost]

Owl Carousel
+ сохранить картинки под таким наклоном.

или делать в css transform

Comments

[Кирилл Кириллов]

А с прозрачным бордером как быть? В Owl.Carousel, как я понимаю, нет же такой доп. фичи, как наложение поверх маски с прозрачным бордером))))

[Localhost]

задать для всего блока картинку png (без фона) этой обводки, а внутри сама карусель.