Streaming live at 10am (PST)

Design carousel for cards


#1

Been having some trouble creating a carousel for cards. I’m trying to make it look similar to the sample attached.

Anyone have any ideas on how to get this to work in a similar fashion?? I have a collection of cards set up inside of a slider at the moment, but now show how to make these smooth transitions where each card slides over. Any suggestions??

Cheers,
JL


#2

Hi @jose_llorens,

Thank you so much for reaching out about creating a carousel for cards. Definitely a great question, and I’m happy to help!

One of my teammates is actually creating something very similar to what you are wanting.

You will notice in the example URLs that they are using interactions within the slider element to complete the look they are going after.

Live: http://slider-example-interaction.webflow.io/
Read-only link: https://preview.webflow.com/preview/slider-example-interaction?preview=3ed82c4b407731526aeda539f482d779

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I’m happy to help further!


#3

Great help!! Exactly what I was looking for. The layout was pretty straightforward using the slider cards.

However, where I’m confused right now is setting up all the interactions with 2.0 which I haven’t gotten around to using. There’s quite a few of them. Any suggestion on understanding these animations better??

See below in the image, for example, an interaction for hero_callout which I can’t identify anywhere.

Best,
Jose


#4

Hi @jose_llorens,

Definitely a great question. It looks like my teammate is using the standard slider element to complete the slide interaction, and then he added an additional “middle mask” to have the 1 of 3 effect:

Also, the interactions used were completed with IX2 and a “Slider” interaction was selected. Within those interactions - the opacity and size is changed as you can see in the following short screencapture: https://cl.ly/0X1M2h2O0g2S

Hopefully this was helpful.

Feel free to let me know if this is helpful, or if you have any additional questions.

I’m happy to help further!