Dance of the Dots: Choreographieren benutzerdefinierter Slider-Steuerelemente in Webflow

Hallo, Webflow-Designer. Heute wagen wir uns in die spannende Welt von jQuery und benutzerdefinierten Slider-Steuerelementen. Ja, wir sind dabei, diese statischen Punkte unter Ihrem Webflow-Slider nach Ihrer Musik tanzen zu lassen. Vor Kurzem hatten wir ein Projekt, bei dem wir den Webflow-Slider mithilfe von Linkblöcken außerhalb des Webflow-Slider-Elements steuern mussten. (Um es kurz zu machen, wir haben ein Overlay-Navigationselement mit einer Reihe von Linkblöcken, die Sie zu bestimmten Folien führen mussten, wenn Sie darauf geklickt haben). Unten finden Sie ein kurzes Video, das unsere benutzerdefinierten Steuerelemente zeigt:

<div style="padding:81.1% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/873388654?badge=0&autopause=0&quality_selector=1&progress_bar=1&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Custom Slider Controls in Webflow"><script src="https://player.vimeo.com/api/player.js"></script></iframe></div>

Wie dem auch sei, wir haben eine Menge gegoogelt und herausgefunden, dass wir eine Änderung an einer bestimmten Folie auslösen können, indem wir einen Klick auf den Navigationspunkt dieser Folie simulieren und dafür ein Skript zusammengeschustert haben). Lassen Sie uns damit beginnen, Ihnen das Skript zu geben, das Sie dafür benötigen:

<iframe height="300" style="width: 100%;" scrolling="no" title="Custom Slider Controls" src="https://codepen.io/milkmoonstudio/embed/preview/rNoRzNG?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Den Stift ansehen <a href="https://codepen.io/milkmoonstudio/pen/rNoRzNG">
</a><a href="https://codepen.io/milkmoonstudio">Benutzerdefinierte Slider-Steuerelemente von Jakes van Eeden (@milkmoonstudio)</a>
auf <a href="https://codepen.io">CodePen</a>.
</iframe>

Auftakt zum Tanz: Was du brauchst

Bevor wir in den Code-Ozean eintauchen, stellen Sie sicher, dass Sie Folgendes bereit haben:

• Ein Webflow-Projekt, in dem Sie die benutzerdefinierten Slider-Steuerelemente implementieren möchten. Klassen auf dem Slider spielen keine große Rolle, wir nennen den nativen Slider nicht Namen in Webflow im Script: .w-Schieberpunkt
  Wir haben sie in unserem Projekt nicht einmal sichtbar, die Elementsichtbarkeit wurde auf versteckt gesetzt.
• Ein sehr grundlegendes Verständnis von jQuery (keine Angst, wir werden es durchgehen).

1. Akt: Vorbereitung der Bühne

Lassen Sie uns zunächst sicherstellen, dass unser Webflow-Projekt für einige jQuery-Aktionen vorbereitet und vorbereitet ist.

Den Slider erstellen:

1. Navigiere zu deinem Webflow Designer.
2. Erstellen Sie ein neues Slider-Element.
3. Passen Sie es nach Herzenslust an, aber lassen Sie die Punkte unter dem Slider unverändert oder verstecken Sie sie.

Erstellung benutzerdefinierter Punkte:

1. Erstellen Sie einen neuen Div-Block und nennen Sie ihn controls__wrap.
2. Erstellen Sie nun innerhalb von controls__wrap Ihre Link-Blöcke (einen für jede Folie in Ihrem Slider) und geben Sie jedem eine Klasse von slider__controller.
3. Gestalten Sie diese Link-Blöcke nach Ihren Wünschen - dies sind Ihre Steuerelemente, die Sie zu jeder Folie in Ihrem Slider führen. Ihre Reihenfolge entspricht der Reihenfolge Ihrer Folien.

Zweiter Akt: Das jQuery-Ballett

Nun zu dem Code, der diese Punkte zum Tanzen bringt! Wir werden jQuery verwenden, um eine lebendige Interaktion zwischen unseren benutzerdefinierten Punkten und den nativen Webflow-Slider-Punkten zu erzeugen.

Vorbereitung des Codestifts:

1. Gehe zu deinen Projekteinstellungen oder Seiteneinstellungen.
2. Unter dem Tab „Benutzerdefinierter Code“ finden Sie im Abschnitt „Fußzeilencode“ eine Oase für Ihre benutzerdefinierten Skripte. Hier wird sich unser jQuery-Skript befinden.

Das Script einfügen:

1. Kopiere das Skript, das wir zuvor geteilt haben.
2. Fügen Sie es in den Abschnitt „Fußzeilencode“ Ihrer Projekteinstellungen ein.

Die Magie verstehen:

Das Skript durchläuft jeden benutzerdefinierten Punkt innerhalb von .controls__wrap. Wenn auf einen benutzerdefinierten Punkt geklickt wird, löst es ein Tipp-Ereignis auf dem entsprechenden nativen Webflow-Schiebereglerpunkt aus und navigiert zur entsprechenden Folie.

3. Akt: Gardinen schließen sich, Applaus folgt

Kehren Sie jetzt zum Designer zurück, klicken Sie auf Veröffentlichen und sehen Sie sich den Tanz der Punkte auf Ihrer Live-Website an! Deine benutzerdefinierten Punkte sollten jetzt den Webflow-Slider steuern und deinem Publikum ein maßgeschneidertes Erlebnis bieten.

Wir hoffen, das hilft dir genauso wie uns, ich bin mir nicht sicher, wer auf die Idee gekommen ist, die Punkte zu kontrollieren, wir haben gerade eine Referenz und einen Codeausschnitt auf Stackoverflow gefunden und ihn dann von dort aus konkretisiert, aber es ist toll, also viel Spaß.