New free cloneables are live! Join the club and claim them.

How to add custom arrows to a Webflow slider

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


<!-- No Highlight Tabs www.flowbase.co -->
<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.

This product is not yet available. Join us on twitter for updates.