Webflow-Slider-Punkte: Eigene Slider-Steuerung mit jQuery (Tutorial)

Hallo, Webflow-Designerinnen und -Designer. Heute tauchen wir in die spannende Welt von jQuery und eigenen Slider-Steuerungen ein. Ja, wir bringen die statischen Punkte unter deinem Webflow-Slider dazu, nach deiner Pfeife zu tanzen. Kürzlich brauchten wir in einem Projekt eine Möglichkeit, den Webflow-Slider über Linkblöcke außerhalb des Slider-Elements zu steuern. (Kurz gesagt: Wir haben ein Overlay-Navigationselement mit einer Reihe von Linkblöcken, die beim Klick zu bestimmten Slides führen sollten.) Im kurzen Video unten siehst du unsere eigenen Steuerelemente in Aktion:

Diagramm eigener Linkblöcke, die die versteckten nativen Webflow-Slider-Punkte auslösen, welche den Slider zur passenden Slide bewegen

Wir haben also ausgiebig gegoogelt und herausgefunden, dass sich ein Wechsel zu einer bestimmten Slide auslösen lässt, indem man einen Klick auf den Navigationspunkt dieser Slide simuliert. Daraus haben wir ein Skript zusammengebastelt. Legen wir gleich los und geben dir das Skript, das du dafür brauchst:

Vorspiel zum Tanz: Was du brauchst

Bevor wir uns in den Code-Ozean wagen, stell sicher, dass du Folgendes bereit hast:

Ein Webflow-Projekt, in dem du die eigenen Slider-Steuerungen umsetzen möchtest. Die Klassen am Slider spielen kaum eine Rolle. Im Skript verwenden wir die native Slider-Klasse statt Namen, die du in Webflow vergibst: .w-slider-dot
In unserem Projekt sind die Punkte nicht einmal sichtbar: Die Sichtbarkeit des Elements war auf „hidden“ gesetzt.
Ein ganz grundlegendes Verständnis von jQuery (keine Sorge, wir gehen alles Schritt für Schritt durch).

Akt 1: Die Bühne vorbereiten

Zuerst einmal sorgen wir dafür, dass dein Webflow-Projekt für etwas jQuery-Action vorbereitet und startklar ist.

Den Slider erstellen:

Öffne den Webflow Designer.
Erstelle ein neues Slider-Element.
Gestalte es ganz nach deinem Geschmack, aber lass die Punkte unter dem Slider so, wie sie sind, oder blende sie aus.

Eigene Punkte erstellen:

Erstelle einen neuen Div-Block und nenne ihn controls__wrap.
Erstelle innerhalb von controls__wrap deine Linkblöcke (einen für jede Slide in deinem Slider) und gib jedem die Klasse slider__controller.
Gestalte diese Linkblöcke nach Belieben. Sie sind deine Steuerelemente, die dich zu den einzelnen Slides deines Sliders bringen. Ihre Reihenfolge entspricht der Reihenfolge deiner Slides.

Akt 2: Das jQuery-Ballett

Nun zum Code, der diese Punkte zum Tanzen bringt! Wir nutzen jQuery, um ein lebendiges Zusammenspiel zwischen unseren eigenen Punkten und den nativen Slider-Punkten von Webflow zu schaffen.

Den Code hinzufügen:

Öffne die Site settings (für alle Seiten) oder die Page settings der Seite mit dem Slider.
Unter dem Tab „Custom Code“ in den Site settings findest du im Bereich „Footer code“ einen Platz für deine eigenen Skripte. In den Page settings ist das Gegenstück das Feld „Before </body> tag“ im Bereich Custom code. Hier wird unser jQuery-Skript untergebracht.

Das Skript einfügen:

Kopiere das Skript, das wir weiter oben geteilt haben.
Füge es in den Bereich „Footer code“ deiner Site settings ein (oder in das Feld „Before </body> tag“ in den Page settings, wenn nur eine Seite den Slider enthält).

Die Magie verstehen:

Das Skript durchläuft jeden eigenen Punkt innerhalb von .controls__wrap. Wird ein eigener Punkt angeklickt, löst es ein Tap-Event auf dem entsprechenden nativen Webflow-Slider-Punkt aus und navigiert so zur jeweiligen Slide.

Akt 3: Der Vorhang fällt, der Applaus beginnt

Geh jetzt zurück in den Designer, klick auf Publish und erlebe den Tanz der Punkte auf deiner Live-Site! Deine eigenen Punkte sollten jetzt den Webflow-Slider steuern und deinem Publikum ein maßgeschneidertes Erlebnis bieten.

Wir hoffen, das hilft dir genauso sehr, wie es uns hilft. Ich weiß nicht, wer auf die Idee kam, die Punkte zu steuern. Wir haben auf Stack Overflow nur einen Hinweis und einen Code-Schnipsel dazu gefunden und von dort aus weiter ausgearbeitet. Aber es ist clever, also viel Spaß damit.

FAQ

Wie verlinke ich von außerhalb des Sliders auf eine bestimmte Slide in einem Webflow-Slider?

Setze irgendwo auf der Seite einen Linkblock ein und lass ihn einen Klick auf den passenden nativen Slider-Punkt simulieren. Genau das macht unser Skript: Es durchläuft die eigenen Steuerelemente innerhalb von .controls__wrap und löst beim Klick auf eines davon ein Tap-Event auf dem entsprechenden .w-slider-dot aus, wodurch der Slider zu dieser Slide springt. Die Reihenfolge deiner eigenen Steuerelemente muss der Reihenfolge deiner Slides entsprechen.

Kann ich die standardmäßigen Webflow-Slider-Punkte ausblenden und trotzdem nutzen?

Ja. Das Skript braucht die nativen Punkte nur im Seitencode, sie müssen nicht sichtbar sein. In unserem eigenen Projekt waren die Punkte über die Element-Sichtbarkeit ausgeblendet, sodass die Webflow-Slider-Punkte im Hintergrund ihre Arbeit erledigten, während unsere eigenen Steuerelemente das Reden übernahmen.

Wohin kommt der Custom Code für Webflow-Slider-Punkte?

Füge das Skript in den Bereich „Footer code“ unter dem Tab „Custom Code“ in den Site settings ein (für alle Seiten) oder in das Feld „Before </body> tag“ in den Page settings (nur für die Seite mit dem Slider). Veröffentliche danach, denn Custom Code läuft im Designer nicht.

Das ist die Kurzfassung. Wenn dich Slider begeistern: Wir haben auch einen Beitrag über vertikale Slider mit automatischer Höhe in Webflow. Wenn du gern Dinge in Bewegung bringst, wirf einen Blick auf unseren visuellen Leitfaden zu Easing-Funktionen in Webflow und unseren Beitrag über dynamische Animationen in Webflow. Für noch mehr Copy-and-paste-Goodies lohnen sich unsere Webflow Cloneables, und im How-To-Bereich unseres Blogs gibt es noch mehr davon.