How to Add Custom Slider arrows to a Webflow Slider

Learn how to add fully custom next and back arrows to your Webflow slider and place them anywhere on the page.

June 17, 2025

Peter B

Product & Development

How to Add Custom Slider Arrows in Webflow (With Full Control)

Want more flexibility than Webflow’s default slider arrows allow? This guide shows you how to create fully custom next and previous buttons that you can place anywhere on your layout — while still using Webflow’s native slider.

By hiding the default arrows and using a lightweight script, you’ll get the exact functionality you want, without compromises.

‍

✨ Why Use Custom Arrows?

Webflow’s default arrows are great for quick builds, but they’re:

Locked in fixed positions
Hard to style for unique layouts
Not ideal for more advanced or creative designs

With this setup, you can position your arrows freely, design them however you want, and still have full slider control.

🔗 Clone or Preview

Want to skip setup and see it in action?

👉 Clone this Webflow project
👀 Preview the live demo

Install Instructions ✍️

1. Add the Booster Script to Your <head>

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 and Hide Default Arrows

Drag a Slider element onto your page

Wrap the entire slider inside a div-block (we’ll call it Slider Wrapper)

Select the default arrows and dots, give them a class, and set their display: none — we’ll be using our own instead.

Add this attribute to the Slider Wrapper:

Name: fb-slider  
Value: true

If you're using the booster 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.

3. Create Your Custom Arrows

Inside your Slider Wrapper, build your own navigation buttons (text links, icons, buttons — up to you). Just make sure to give them the correct attributes:

Name: fb-slider-arrow Value: left‍
Name: fb-slider-arrow Value: right

You can now style and position these however you like — without any Webflow limitations.

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-nav Value: active (for active state)
Name: fb-slider-nav Value: inactive (for inactive state)

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.