Help! Recreate this style image carousel

Hello everyone,

How do I recreate the style of image slider as is shown in the image attached.

There are 5 screens in total. And one which is selected is in the foreground and is bigger and centres in the position. While the rest are at the sides.

Any help is appreciated. Thank you.

Cool effect. No way, for now, to create this by webflow core slider.

Custom code:

Combine Webflow and modern sliders like: slick, swiper, OWL, Flickity – Add custom CSS styles

Custom code in head and body tags | Webflow University.

Phone

The Phone is transparent png - with empty screen (located in the center + z-index).
The active/current slide - positioned to fit on the empty screen of the phone.

Slides Scale

The scale effect is by some transition and transform (Normal CSS). regular slides- with style1 - Active/current tab with style2 - (CSS transition/transform from 1–>2)
Example - scale+blur

Summary

This is more freelancer job - no way to solve this by forum Answer. But this is the direction for this idea.

1 Like

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.