If your carousel is not moving:
- Publish Your Site: Ensure you are viewing the live, published version of your site.
- Verify Script Installation:
- Confirm that the carousel script is correctly installed on your site.
- Confirm that the script has closing brackets
- Check Hover Settings: Verify that the "pause-on-hover" attribute is set to "false".
- Inspect the Console Log for Errors: Use your browser’s developer console to look for error messages:
- Error: "Required attribute missing"
- Make sure the Carousel Content element is nested inside the Carousel Horizontal Wrapper.
- Ensure all required attributes are applied to the appropriate elements.
- Error: "Required attribute missing"
- Check Placement in the Layout: Ensure the carousel is not placed inside a dropdown or navigation menu, as hidden elements cannot be detected by the script.
- Reinstall the Script if Necessary: If the issue persists, delete and reinstall the carousel script.
If your carousel is moving too fast:
- Check the Speed Attribute: Review and adjust the carousel speed attribute value as needed.
- Ensure Only One Script is Installed:
- Multiple instances of the script can cause the carousel to speed up unexpectedly.
- Check for duplicate scripts in embeds, page code, or app-installed scripts, and remove any extras.
If your carousel is jumping:
- Ensure Only One Script is Installed:
- Multiple instances of the script can lead to erratic behavior.
- Remove any duplicate scripts from embeds, page code, or app-installed locations.
If your carousel is causing interactions to trigger twice
When adding interactions to carousel items, the script needs to reinitializes Webflow interactions so they can apply to newly generated carousel items. However, if your page also includes a page load interaction at the top of your page, this can cause the interaction to trigger twice in quick succession, leading to unintended behavior.
By default, the fb-carousel-ignore-interactions
attribute is set to false (or is not present). This means Webflow interactions will reinitialize after carousel items are updated.
If you want to prevent interactions from reinitializing, you can set fb-carousel-ignore-interactions="true"
. Here’s a clear breakdown of how this attribute works:
fb-carousel-ignore-interactions="false"
(default) or when the attribute is not set: Webflow interactions reinitialize as usual, applying to newly added carousel items.fb-carousel-ignore-interactions="true"
: Webflow interactions will not reinitialize, avoiding any interference with other interactions (e.g., preventing page load interactions from running multiple times).
Can I connect carousel to CMS?
Yes, creating a CMS-powered carousel is straightforward. Follow these steps:
- Add a Collection List: Insert a collection list to your project.
- Apply Required Attributes:
- Add the
carousel-wrapper
attributes to the Collection List Wrapper. - Set
fb-carousel-content: true
on the Collection List.
- Add the
These attributes will enable the carousel to function seamlessly with your CMS content.
If your carousel is overflowing its container:
- Set the Container's Overflow Property:
- Apply
overflow: hidden;
to the container element to prevent the carousel from exceeding its boundaries
- Apply

If your carousel displays differently on the published site:
- Check for Conflicting Styles: The carousel script automatically applies specific styles to ensure proper functionality. Make sure there are no conflicting styles on the following elements:
- Carousel:
overflow: hidden;
- Carousel Content:
position: relative;
display: flex;
flex-direction: row;
orcolumn;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: visible;
will-change: transform;
- Carousel:
By following these steps, you can resolve common issues and ensure your carousel functions as expected.