Getting Started 🫧
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.
Install Instructions ✍️
1. Add the booster script to your project.
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/boosters-custom-slider-webflow@2.0.1/dist/custom-slider.min.js" type="text/javascript"></script>
2. Add a div-block to wrap your slider
Next, 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:
- Name:
fb-sliderValue:true
3. Add custom slider buttons into the wrapper
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:
- Name:
fb-slider-arrowValue:left - Name:
fb-slider-arrowValue:right
That’s all you need to turn your buttons into fully functional slider controls!
4. Add custom slider dots
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:
- Name:
fb-slider-navValue:active - Name:
fb-slider-navValue:inactive
Once added, your custom slider dots will be automatically created and perfectly aligned with your slides!
5. Publish & Test 🚀
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!
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
