Return to articles
How to add custom arrows to a Webflow slider

How to add custom arrows to a Webflow slider

Learn how to add custom arrows to your native webflow slider component, and change slides with any button

November 19, 2019

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

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.

Hide the Default / Native Slider Arrows

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

Build the custom arrows (Buttons / Links etc)

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.

Give the appropriate Class Names

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

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'

Add the custom script.

Add the following script into the websites custom code settings

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

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 -->
.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 */    

That's it! Publish and preview your site.

Enjoyed this read?

Stay up to date with the latest video business news, strategies, and insights sent straight to your inbox!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.


Boost your webflow site further.