Positioning the default Webflow slider arrows can be a bit tricky, right? This booster makes things easier by letting you turn any element into clickable slider buttons for smooth navigation between slides. Plus, it gives you much better control over the navigation dots, so you can style them however you like—no need to mess with custom CSS anymore!
For the best experience, we recommend using our Webflow Boosters App. It automatically adds the native slider to your page with all the right settings. But if you'd rather go the manual route, no worries! You can still get the same results by following our guide here.
Simply copy the script below and paste it into the <head>
tag of your project's custom code settings. If you're not familiar with using custom code in Webflow, no worries! You can click here to learn more and get step-by-step guidance.
<!-- Flowbase Booster [Custom Slider] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/[email protected]/dist/custom-slider.min.js" type="text/javascript"></script>
div-block
to wrap your sliderNext, add a simple div-block
to your page that will hold your slider and activate the booster features. This can be an unstyled div, and for this guide, we'll call it the "Slider Wrapper".
To enable the booster, just add the following attribute to the Slider Wrapper:
fb-slider
Value: true
Inside the Slider Wrapper, you can place your custom slider buttons anywhere you like. This gives you total flexibility to style and position them however you want.
Just make sure to add these attributes to your buttons:
fb-slider-arrow
Value: left
fb-slider-arrow
Value: right
That’s all you need to turn your buttons into fully functional slider controls!
To create custom slider dots, simply add two Nav Items for the active and inactive states — usually small circles, around 8px by 8px. You’ll need to add specific attributes to these, and the script will automatically generate the dots based on the number of slides.
Here are the attributes to add to your buttons:
fb-slider-nav
Value: active
fb-slider-nav
Value: inactive
Once added, your custom slider dots will be automatically created and perfectly aligned with your slides!
Once you've completed the steps above—added the script and set the attributes—you're ready to publish your page! Head over to your live staging domain to see the Booster in action and make sure everything works just the way you want.
Enjoy the upgraded slider experience!
Your support means the world to us! In just 10 seconds, you can make a big difference:
Thank you for being awesome! 🌟