How To Create A Carousel In Webflow

Quick summary

This tutorial walks you through building a carousel in Webflow using Div blocks, Flexbox layout, and Webflow Interactions — no plugins or code required. By the end, you'll have a fully looping, auto-sliding carousel that starts animating on page load.

Steps

1. Open the Add Elements tab in the left sidebar of the Webflow Designer.
2. Drag and drop a Div block onto the canvas to act as the carousel wrapper.
3. Add a second Div block inside the first to serve as the Logos container.
4. Confirm you now have two nested Divs in your element hierarchy.
5. Select your Div and open the Style tab in the right sidebar.
6. Use the Style selector field to rename your Div if needed.
7. Insert your logo images or carousel elements inside the inner Div.
8. Add an image of your choice to represent a logo.
9. Adjust image size using the Size section in the right sidebar to prevent overflow.
10. Copy and paste elements to duplicate and populate your carousel.
11. Use the Navigator tab to verify the element hierarchy: Carousel Div > Logo Div > Logos.
12. Select the Logos Container using the Navigator.
13. In the Layout section, set Display: Flex on the Logos Container.
14. Click the X axis setting to configure horizontal alignment.
15. Select Space around to evenly distribute logos across the container.
16. Duplicate the Logos Container using Copy & Paste.
17. Select the parent Carousel Div.
18. Set its Layout to Display: Flex.
19. Select the Logos Container and set its minimum width to 100%.
20. Note that both duplicated containers now each take 100% width, creating 200% total width and overflow.
21. Select the Carousel Div and set Overflow: Hidden in the Size section.
22. Select the parent Div to begin configuring the carousel animation.
23. Go to the Interactions tab in the right sidebar.
24. Select the Page trigger method to start the animation on page load.
25. Choose Page load as the trigger event.
26. Under When page finishes loading, select Action.
27. Choose Start an animation.
28. Click the (+) button next to Timed Animations.
29. Give your animation a name.
30. Select the Logos Container and click (+) next to Actions.
31. Select the action type Transform: Move.
32. Set Affect: Class to apply the animation to both duplicate containers simultaneously.
33. Confirm the correct class is selected.
34. Set a duration for the animation — longer duration means slower scrolling.
35. Set the X axis position to -100% to slide logos to the left.
36. Duplicate the animation to create a second one.
37. Set the second animation's duration to 0s for an instant reset.
38. Set the second animation's X axis position to 0%.
39. Click Save.
40. Enable Loop for the animation.
41. Click Preview to verify the carousel animation.
42. Confirm logos scroll left in an infinite loop like a carousel.
43. Check your finished Webflow carousel in Preview mode.