How to add custom arrows to a Webflow slider

Learn how to add custom arrow sliders to your webflow slider component

‍

If you're anything like us then you've probably spent a bit of time playing around with the webflow slider arrows.
Often we need to position the arrows to suit a certain design and you might have started playing around with some absolute positioning and certain % / PX positioning.

This isn't always the best solution and you'll often find that it's broken on various viewports.
Soooo lets learn how to add any arrows into the slider and use a bit of custom code to turn them into the slider controls.

‍
1 - Hide the Default / Native Slider Arrows

The first thing you'll want to do is hide the default slier arrows. Don't delete these, just change the display to hidden

‍

‍

2 - Build our custom arrows

Now let's build some custom arrows. Get creative and build these in any position you like. Here's our arrows. Just make sure you have a Left / Right arrow.

‍

‍

3 - Give the appropriate Class Names

Now let's give the class name 'slider-left' and 'slider-right' to the relevant arrows.
‍

‍

4 - Set the sliders #ID to communicate with our script.

Now let's give the slider a ID tag so that the script knows where to target. In this case our ID is 'flowbaseSlider'

‍

‍

5 - Add the custom script.

Add the following script into the websites custom code settings
‍

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
var l = $('#flowbaseSlider .w-slider-arrow-left');
var r = $('#flowbaseSlider .w-slider-arrow-right');
$('#flowbaseSlider')
.on('click', '.slider-left', function() {
l.trigger('tap');
})
.on('click', '.slider-right', function() {
r.trigger('tap');
});
});
</script>

‍

6 - Remove accidental highlighting (optional)

Sometimes the user will highlight the icon, this code will stop that from happening. It's entirely optional

‍

<style>
.arrow {
-webkit-touch-callout: none; /* iOS Safari /
-webkit-user-select: none; / Safari /
-khtml-user-select: none; / Konqueror HTML /
-moz-user-select: none; / Firefox /
-ms-user-select: none; / Internet Explorer/Edge /
user-select: none; / Non-prefixed version, currently
supported by Chrome and Opera */
</style>

‍

‍

That's it! Publish and preview your site.

‍

How to add custom arrows to a Webflow slider