Getting Started
Add a carousel that automatically adapts to any content - for a seamless rotation.
Make your content dynamic with the Webflow Carousel Booster, which lets you easily add an automatically looping carousel ticker element in seconds. This feature allows full control over attributes like pause, direction, speed, and more. It's flexible enough to fit any content type, making it perfect for a variety of uses.
The Carousel Booster can be easily added to your Webflow projects using our Webflow Boosters App. Install the app to automatically paste a component with all the all necessary attributes and elements directly into your Webflow project (or follow the instructions below)
Install Instructions ✍️
1. Add the booster script to your project.
To enable the carousel, you'll need to add the script to your Webflow project. Follow the instructions below to add the scripts to your project:
- Copy the following script, or install it with the Free Boosters App
- Paste it into the
<head>section of your Webflow custom code settings. (Need help with custom code? Learn more here).
<!-- Flowbase Booster [Carousel Ticker] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-carousel-ticker@1/dist/carousel-ticker.min.js" type="text/javascript"></script>2. Add a div-block that wraps your carousel and add the main attributes to the element.
Add a div-block that wraps your carousel, here is where we will add our main attributes (Listed below). In our example image below, this element is called Carousel Horizontal.
These following attributes should be added to this element:
Required Attributes*
These attributes are essential and must be applied to the carousel:
fb-carousel=true- Enables the carousel animation
Optional Attributes
These attributes are optional; if not specified, their default values will apply:
-
fb-carousel-direction=left - Set the direction of the carousel
-
fb-carousel-speed=8000 - Set the speed of rotation for the carousel
fb-carousel-delay=200- Set the delay before the carousel starts if using the in-view option
fb-carousel-pauseable=true | false- Allow the track to be paused when hovered
fb-carousel-trigger=on-load | in-view- Start the carousel on-load, or in-view depending on requirements
If you're using the Booster app, the component will automatically come with the necessary attributes, so you can skip these setup steps. The values can all be adjusted to suit your needs, like right, bottom, top or the delay before the carousel starts.
3. Add the carousel content attribute
Inside the Carousel Horizontal that we created in the previous step, add a new div-block, lets call it Carousel Content this is what will hold your content. This only needs the following attribute:
- Name:
fb-carousel-content=true
It's important that this element has some specific styles
- Apply a
display:flexand align it horizontally
That's basically it, you can any content inside here, and the booster will automatically calculate the size for repeating. Make sure to set display: flex aligned to the left on this element.
4. Changing to vertical
The vertical carousel setup works similarly to the horizontal one. It just needs a flex vertical layout and the attribute set to either bottom or top. Please review the main project to see exactly how this is done in practice.
5. Add the component with the Booster App
The Flowbase Booster app provides a purpose-built UI to easily implement any booster into your projects. Adjust the settings and add it to your project for free!
6. Publish & Test
Once you've completed the steps above, including adding both the script and the necessary attributes, it's time to publish your page. Head over to your live staging domain to see the Booster in action.
Did you find this helpful? 💕
Your support means the world to us! In just 10 seconds, you can make a big difference:
- Leave a like on our Free Webflow Booster App.
- Share what you built with us on Twitter! We re-post to thousands!
Thank you for being awesome! 🌟
Add this booster + more with the official webflow application.
Join our community and
claim free products
No Spam. Only sweet content and updates of our products.
Join 55,000+ other creators in our community
