Hoe voeg je een voor-en-na-slider toe in Webflow

Een voor-en-na-slider is een van de snelste manieren om de resultaten van je werk te laten zien. Het enige wat iemand hoeft te doen, is de schuifbalk verslepen om het effect van je herontwerp, renovatie of retouche te onthullen. Geen gestaar naar twee foto’s naast elkaar of een zoek-de-verschillen-spelletje — het resultaat is meteen zichtbaar.

Of je nu een bureau runt of freelancer, ontwerper, fotograaf, kunstenaar, aannemer of iemand anders bent die graag werk wil showen, een voor-en-na-slider is een geweldige manier om dat te doen. Helaas beschikt Webflow — ondanks dat het een van de meest geavanceerde websitebouwers is (en populair onder ontwerpers) — niet over een ingebouwde voor-en-na-slider. Als je er toch een wilt toevoegen, heb je drie opties: een “cloneable” uit de community installeren, een gratis gehoste widget embedden, of er zelf een bouwen met Webflow’s eigen interactie-engine (IX2).

Hieronder bespreken we elk van deze opties.

Optie 1: Gebruik een Webflow cloneable

Je eerste impuls is waarschijnlijk om in de Made in Webflow-showcase of op een site als Flowbase te zoeken naar “cloneables.” Hoewel dit kan werken, gaat het niet zonder gedoe.

Het grote nadeel is dat je vastzit aan de aanpak van iemand anders. Je moet je strikt houden aan de bestaande architectuur en naamgevingsconventies van de cloneable. Denk aan aangepaste attributen, CSS-regels en absolute positionering. Als je hier iets fout doet, werkt het simpelweg niet. Voeg je het toe aan het einde van je ontwerp, dan moet je mogelijk een aantal andere elementen heroverwegen.

Maar als je toch voor deze aanpak kiest, kun je als volgt een cloneable toevoegen:

1. Zoek een voor-en-na-slider cloneable die actief wordt onderhouden en een licentie heeft waarmee je hem mag gebruiken. Kloon deze naar je eigen project.

2. Vervang de afbeeldingen door je eigen foto’s. Verplaats de geneste divs niet, wijzig geen namen en probeer niets op te ruimen — dat kan de slider kapotmaken.
3. Publiceer je site en test het. Controleer of alles werkt op zowel desktop als mobiele apparaten. Als je per ongeluk iets hebt gewijzigd, kan het zijn dat het JavaScript onder bepaalde omstandigheden niet correct wordt uitgevoerd.

Al met al werkt deze methode, maar het is erg omslachtig voor een simpele visuele component — en je hebt waarschijnlijk niet zoveel controle als je zou willen. Elk herontwerp moet de originele opzet volgen, tenzij je het script dat de slider aanstuurt wilt herschrijven.

Optie 2: Gebruik een gratis no-code slider-widget (aanbevolen)

Wil je liever niet worstelen met geneste div-blokken, aangepaste attributen configureren en — als het misgaat — JavaScript debuggen dat iemand anders heeft geschreven? Dan is de makkelijkste manier een gehoste embed zoals de Jotform Before and After Slider Widget. Het is supergemakkelijk in te stellen en lost veel van de problemen met cloneables op.

Zo voeg je een voor-en-na-slider toe aan Webflow met Jotform:

1. Ga naar de Jotform Before and After Slider Widget en log in op je Jotform-account. Heb je er nog geen? Dan kun je je tijdens het installatieproces gratis aanmelden.

2. Geef je widget een titel en voeg je vergelijkingsparen toe. Je kunt afbeeldingen rechtstreeks uploaden of toevoegen via een URL. Als je wilt, kun je ook een bijschrift aan elk afbeeldingspaar toevoegen en de labels aanpassen. Stel vervolgens in of de gebruiker de schuifbalk moet slepen om het voor en na te zien, of dat het wordt geactiveerd bij hoveren. Klik als je klaar bent op Doorgaan. 

3. Nu is het tijd om je slider te stylen. Je kunt de kleuren, branding, het lettertype en de weergave instellen. Als je tevreden bent, klik je opnieuw op Doorgaan.

4. Configureer tot slot de lay-out. Kies of je een horizontale of verticale slider wilt, waar de beginpositie van de scheidslijn is, hoe breed je de slider wilt hebben en of deze wordt weergegeven op mobiele apparaten, desktopapparaten of beide. Klik vervolgens op Probeer het gratis op je website.

5. Klik op Code kopiëren om de embedcode naar je klembord te kopiëren en ga vervolgens terug naar je Webflow-site.

6. Open het menu Add en selecteer Code Embed. Plak de embedcode en positioneer het blok op je site. Klik op Publiceren en het staat live op je site. Zo simpel is het.

Zoals je ziet is de gratis no-code route een stuk eenvoudiger dan de cloneable-optie. Het is makkelijker te stylen, je hoeft je geen zorgen te maken over aangepaste attributen, strikte klassenamen of JavaScript, en het werkt gewoon. Wil je iets aanpassen? Ga dan terug naar Jotform en bewerk de instellingen van je voor-en-na-slider.

Optie 3: Bouw het handmatig met Webflow Interactions

Voor Webflow-puristen die volledige controle willen en geen JavaScript van anderen of een externe widget willen gebruiken, is het mogelijk om een slider te bouwen met Webflow’s eigen interactie-engine, IX2. Een custom code slider bouwen in Webflow is veruit de meest geavanceerde en ingewikkelde methode, maar het geeft je wel volledige controle over hoe de slider eruitziet en zich gedraagt.

Om je eigen Webflow-vergelijkingsslider te bouwen met IX2, moet je twee afbeeldingen stapelen in een relatief gepositioneerde container, waarbij elke afbeelding in een eigen div-blok zit. Voor de bovenste afbeelding fungeert het div-blok als het masker.

Vervolgens moet je voor de Webflow voor-en-na-interactie een Mouse Move Interaction aanmaken. Stel de Trigger in op Mouse X en het doel op het masker-div. Stel de geanimeerde eigenschap in op Width en laat deze variëren tussen 0 en 100 procent. Op die manier bepaalt de X-as-beweging van de muis de overlap tussen de twee afbeeldingen.

Wil je natuurlijk een scheidslijn tussen de twee afbeeldingen, dan moet je die zelf aanmaken. En om die perfect te synchroniseren met de muisbeweging heb je geavanceerde Webflow-animatievaardigheden nodig.

Hoewel de ingebouwde tools van Webflow kunnen werken, vereist het veel finetunen en een diepgaand begrip van Webflow om alles goed te krijgen. Je moet ook een aparte animatie instellen als je wilt dat het werkt op mobiele apparaten. Wat je wint aan controle, lever je in aan gemak.

Verbeter je Webflow-site met slimme no-code widgets

De snelste, makkelijkste en handigste manier om een voor-en-na-slider in Webflow toe te voegen is met de Jotform Before and After Slider Widget. Het heeft geen van de nadelen van een Webflow-afbeeldingsvergelijking via een cloneable en is een stuk eenvoudiger dan er zelf een bouwen met IX2. Een robuuste, serverloze oplossing bespaart je veel ontwikkeluren en zorgt elke keer voor een solide responsive design.

Bovendien heeft Jotform een reeks andere gratis websitewidgets waarmee je je site naar een hoger niveau kunt tillen. Wil je Google-reviews, toegankelijkheidsopties, een simpele terug-naar-boven-knop of tientallen andere handige functionaliteiten toevoegen? Bekijk dan de widgetbibliotheek. Je kunt ook de Jotform-Webflow-integratie gebruiken om Jotform’s krachtige tools voor gegevensverzameling rechtstreeks aan je site te koppelen.