Getting Started
Add a carousel that automatically adapts to any content - seamless and simple
Make your content more dynamic with our 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.
Install Instructions ✍️
1. Add the booster script to your project.
Copy the script below and add it to the <head> tag of your custom code settings. If you're unsure about custom code in Webflow, you can click here to learn more.
<!-- 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
Add a div-block that wraps your carousel, here is where we will add our main attributes (Listed below). In our example, this element is called Carousel Horizontal.
These following attributes should be added to this element:
- Name:
fb-carouselValue =true - Name:
fb-carouse-directionValue =left - Name:
fb-carousel-speedValue =8000 - Name:
fb-carousel-delayValue =200 - Name:
fb-carousel-pauseable=true
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-contentValue:true
It's important that this new has some specific styles
- Apply a
display:flexand align it, you can check these in the image below.
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
