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.