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

En ajoutant des flèches personnalisées à votre curseur, nous pouvons éviter les limites fixées par les flèches par défaut du curseur de webflow. Dans ce petit guide, nous allons simplement masquer les flèches par défaut et utiliser un petit script pour communiquer avec nos nouveaux boutons. Commençons.

Cacher les flèches de défilement par défaut / natif

La première chose à faire est de cacher les flèches de défilement par défaut. Ne les supprimez pas, mais faites en sorte que l'affichagesoit caché.

Construire les flèches personnalisées (Boutons / Liens etc)

Maintenant, construisons des flèches personnalisées. Soyez créatifs et construisez-les dans la position que vous souhaitez. Voici nos flèches. Assurez-vous que vous avez une flèche gauche/droite.

Donnez les noms de classe appropriés

Donnons maintenant le nom de classe "slider-gauche" et "slider-droite" aux flèches correspondantes.

Réglez les curseurs #ID pour communiquer avec notre script.

Maintenant, donnons au curseur une balise d'identification pour que le script sache où cibler. Dans ce cas, notre ID est "flowbaseSlider".

‍

Ajoutez le script personnalisé.

Ajoutez le script suivant dans les paramètres du code personnalisé des sites web

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');
   });
});

Supprimer le surlignage accidentel (facultatif)

Parfois, l'utilisateur met l'icône en surbrillance, ce code empêchera que cela ne se produise. 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 */                                  

C'est tout ! Publiez et prévisualisez votre site.