Leitfaden / Artikel

Wie man einem Webflow-Schieberegler benutzerdefinierte Pfeile hinzufügt

Flowbase
Januar 28, 2021
Wie man einem Webflow-Schieberegler benutzerdefinierte Pfeile hinzufügt

Erfahren Sie, wie Sie Ihrer Webflow-Schieberkomponente benutzerdefinierte Pfeil-Schieberegler hinzufügen

Durch das Hinzufügen von benutzerdefinierten Pfeilen zu Ihrem Schieberegler können wir die Einschränkungen vermeiden, die durch die standardmäßigen Webflow-Schieberegler-Pfeile gesetzt sind. In dieser kurzen Anleitung werden wir einfach die Standard-Pfeile ausblenden und ein kleines Skript verwenden, um mit unseren neuen Schaltflächen zu kommunizieren. Lassen Sie uns beginnen.

Ausblenden der Standard- / nativen Schiebereglerpfeile

Als Erstes müssen Sie die Standard-Schiebereglerpfeile ausblenden. Löschen Sie diese nicht, sondern ändern Sienur die Anzeige auf ausgeblendet.

Erstellen Sie die benutzerdefinierten Pfeile (Schaltflächen / Links usw.)

Jetzt wollen wir ein paar benutzerdefinierte Pfeile bauen. Seien Sie kreativ und bauen Sie diese in jeder beliebigen Position, die Sie mögen. Hier sind unsere Pfeile. Stellen Sie einfach sicher, dass Sie einen Links/Rechts-Pfeil haben.

Geben Sie die entsprechenden Klassennamen an

Nun geben wir den entsprechenden Pfeilen die Klassennamen 'slider-left' und 'slider-right'.

Stellen Sie die #ID des Schiebereglers ein, um mit unserem Skript zu kommunizieren.

Jetzt geben wir dem Schieberegler ein ID-Tag, damit das Skript weiß, wo es hin soll. In diesem Fall lautet unsere ID 'flowbaseSlider'.

Fügen Sie das benutzerdefinierte Skript hinzu.

Fügen Sie das folgende Skript in die benutzerdefinierten Codeeinstellungen der Website ein


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

Versehentliches Hervorheben entfernen (optional)

Manchmal wird der Benutzer das Symbol markieren, dieser Code verhindert dies. Es ist völlig optional



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

Das war's! Veröffentlichen Sie Ihre Website und zeigen Sie sie in der Vorschau an.

Flowbase
Januar 28, 2021

Empfangen Sie Webflow-Ressourcen direkt in Ihre Mailbox.

Melden Sie sich an, um wöchentliche Einblicke und Inspirationen in Ihrem Posteingang zu erhalten.

ANDERE ANLEITUNGEN & LEKTIONEN

Steigern Sie Ihre Webflow-Site weiter.