Custom timed carousel prototype

Hi guys,

Was tinkering with a prototype for some stakeholders and I’ve got the basic idea down inside Webflow to get the point across, but I can’t help but think if there was a way for me to replace the content in the second and third options within the carousel to really illustrate the idea better.

Is this possible with how I’ve set up the interaction? Or would a different approach be required? Thanks in advance!

The project folder is called Carousel prototype 2b and the public link is http://edgelab.webflow.io/carousel-prototype-2b


Here is my public share link: LINK
(how to access public share link)

Pretty cool prototype. Your question is “Can I do that with the Carousel element?”.

You can. You could even set the duration and have it slide automatically, and try with little gifs for the anims. Like time of slide 2000ms, time or transition 400ms, time of the gif = 1400ms.

But there’s a better way, the Slider comes with a special trigger for interactions, it allows you to fire up interactions upon opening/closing of a slide.

Learn about it here: Triggers and animations | Webflow University

1 Like

Thanks Vincent, I’ll have a look into the slider and attempt at replicating the same effect!

*** quick up date ***

Thanks for the tip Vincent, after a few tinkers here and there I think I’ve got it working. Although, because the timer indicators run on a separate timeline to the slider, I’m finding that it occasionally falls out of sync (but a refresh of the page seems to fix that, or it’s just my computer being laggy). Is there a better way to accomplish what I’ve done?

I’ve also noticed that, the loop function doesn’t appear to work for me for the timer indicator. I’ve got it checked but it stops after the last frame.

Thanks again!

http://edgelab.webflow.io/carousel-prototype-2b