How To Create A Carousel In Webflow

‍

Follow these steps to create an animated Carousel in Webflow:

From inside your Webflow designer, go to the Add Elements tab on the left sidebar menu.
Drag and drop to insert a Div block that will act as a wrapper for our carousel.
Proceed to add one more Div inside the previous Div to contain our Logos.
We should now have two Divs inside each other.
While selecting your Div, go to the Style tab on the right sidebar menu.
Use the Style selector field to rename your Div if you haven't already.
Now, to begin inserting Logos, (or any other element for our carousel) add these elements inside the inner Div.
Add an image of your choice.
We'll be using an image that resembles a Logo.
Customize the size of your images so they do not overflow using the right sidebar menu, under the Size section.
Copy and paste these to duplicate or add new items and elements you want on your carousel.
Use the Navigator tab from the left sidebar menu to verify the hierarchy of elements. The Carousel Div contains the Logo Div which contains all the Logos.
Now, use the Navigator again to select the Logos Container.
Go to the Layout section on the right sidebar menu and select Display: Flex.
Click on the X: setting.
Select Space around. This will evenly space the logos on our carousel.
Now, select the Logos Container and duplicate it (Copy & Paste).
Select the parent Div Carousel now.
And set its Layout to Display: Flex.
Notice that will collapse all the Logos together. To fix this, select the Logos Container.
And set its minimum Width to be 100%.
This will cause both the duplicates to take up a 100% of the width, causing the total width to be 200% and overflow.
To fix this, select the Carousel Div.
And set the Overflow to Hidden from the Size section.
To begin animating our carousel, select the parent Div.
Go to the Interactions tab from the right sidebar menu.
For our case since we want the carousel to immediately start moving on page load, select the Page trigger method.
Select Page load.
Under When page finishes loading, select Action.
Choose Start an animation.
Click on the (+) next to Timed Animations.
Give your animation a name.
Select the Logos Container.
And click on (+) next to Actions.
Select the type Transform: Move.
Ensure you select Affect: Class instead of element to affect both duplicate containers at the same time.
Ensure the Class is correctly selected.
Select a duration for the animation, the higher the slower they will slide.
Set the X axis position to "-100%".
Duplicate the animation to create a second one.
Set the duration of this second animation to "0s" i.e. instant.
And set the X axis position to "0%".
Click on Save.
Enable Loop for this animation.
You can check how this will now look using Preview.
The Logos will start moving slowly to the left in an infinite loop like a carousel.
And you now have a working carousel in Webflow! Go ahead and check it out using the Preview mode.