Guide / Article

Comment ajouter des flèches personnalisées à un curseur Webflow

Flowbase
October 30, 2020
Comment ajouter des flèches personnalisées à un curseur Webflow

Apprenez comment ajouter des curseurs de flèches personnalisés à votre composant de curseur de flux Web

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)

Maintenant, construisons des flèches personnalisées. Soyez créatif et construisez-les dans la position que vous souhaitez. Voici nos flèches. Assurez-vous simplement d'avoir une flèche Gauche/Droite.

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.

Maintenant, donnons au curseur une balise ID pour que le script sache où cibler. Dans ce cas, notre ID est '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');
 $('#flowbaseSlider')
   .on('click', '.slider-left', function() {
     l.trigger('tap');
   })
   .on('click', '.slider-right', function() {
     r.trigger('tap');
   });
});

Remove accidental highlighting (optional)

Parfois, l'utilisateur met l'icône en surbrillance, ce code empêchera cela de se produire. C'est entièrement facultatif



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

Flowbase
October 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.