Overview ⬅️➡️
Have a unique layout using a Webflow slider and need some next & back buttons that you can position anywhere? By adding custom arrows to your slider, we can avoid the limitations set by the default webflow slider arrows. In this short guide, we will simply hide the default arrows, and use a small script to communicate with our new buttons. Let's get started.
To add this into your project, ensure you add the provided code into your custom code settings.
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 the slider element & hide the default arrows
If you're using the app, the demo component will include all the attributes and steps by default. However, follow this guide to learn how to set it up manually.
Add the slider element to your page and wrap it in a div-block. In this example, we’ll call this div-block ‘Slider Wrapper’. The Slider Wrapper is where we’ll add our custom arrows, allowing us to position them freely.
Add the following attribute to the Slider Wrapper:
- Name:
fb-sliderValue:true
Set the default Webflow arrows and slider navigation dots to hidden. Since we'll be creating custom arrows to avoid Webflow’s default limitations, simply add a class to them and set their display:none.
3. Build the custom arrows (Buttons / Links etc)
Now let's build some custom arrows. Get creative and build these in any position you like, just make sure they are located within the div-block we created earlier. With these buttons you can place them and design them exactly how you like. You won't have the limitations implyed by the default buttons.
Just make sure to add these attributes to your buttons:
- Name:
fb-slider-arrowValue:left - Name:
fb-slider-arrowValue:right
4. Add custom slider dots (Optional)
To customize your slider dots, start by adding two Nav Items: one for the active state and one for the inactive state. Typically, these are small circles about 8px by 8px. Assign specific attributes to these items, and the script will take care of generating the correct number of dots for your slides.
Use the following attributes for each state:
- Name:
fb-slider-navValue:active(for active state) - Name:
fb-slider-navValue:inactive(for inactive state)
5. Publish & Test 🚀
After you’ve followed the previous steps—adding the script and setting the attributes—it’s time to publish your page! Visit your live staging domain to see the Booster in action and ensure everything functions perfectly.
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! 🌟
