How to create 3D Carousel?

Design help Custom code
1

Hi again!

I am trying to create this type of slider, where the cards are close together and are behind one another.

Screen Shot 2023-01-24 at 11.39.02 PM
Screen Shot 2023-01-24 at 11.39.02 PM1920×1023 199 KB

Screen Shot 2023-01-24 at 11.38.52 PM
Screen Shot 2023-01-24 at 11.38.52 PM1920×1015 129 KB

So far I’ve created this (below) with the webflow slider, but unsure how to put them closer together with multiple z values. Any ideas will be super appreciated. Thanks!

Screen Shot 2023-01-24 at 11.39.37 PM
Screen Shot 2023-01-24 at 11.39.37 PM1920×985 81.8 KB

Screen Shot 2023-01-24 at 11.39.27 PM
Screen Shot 2023-01-24 at 11.39.27 PM1920×977 101 KB

Here’s the website: madtest03.webflow.io
here’s the read only link: Webflow - MAD Global

2

hi @soulmonsta_art as WF slider is very simple and twisting it is PIB you should use something like Swiper JS

I have done in past simple example of its use so feel free check it out how it is structured. I haven’t done it with CMS in WF but there can be some example on “Made with Webflow” page. You are looking for “3D carousel” or similar keywords

1 Like
3

Thank you! I saw the ones implemented with custom css and js before… but harbored hope that it’s possible with Webflow’s native interactions.

Do you think that with your example i’ll be able to change the background on swipe just like I have now? (the background matches the card)

4

hi @soulmonsta_art yes if you mean color it is just CSS. If you mean dynamically add images from CMS you have to discover your self but I’m positive about this.

edit: here is link from past