Guide / Article

How to add custom arrows to a Webflow slider

Flowbase
September 30, 2020
How to add custom arrows to a Webflow slider

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

<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>

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.

Flowbase
September 30, 2020

Recieve webflow resources directly to your mailbox.

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

OTHER GUIDES & LESSONS

Boost your webflow site further.