Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Wat is het Slider-bouwblok?

Het Slider-bouwblok is een horizontaal roterende sectie waarin meerdere items na elkaar worden getoond: projecten, testimonials, producten, logo's. De slider heeft één grote beperking: hij verbergt wat niet zichtbaar is. De meeste bezoekers zien alleen de eerste slide; de rest wordt genegeerd.

Dat betekent niet dat sliders nooit werken. Goed ingezet — op de juiste plek, voor het juiste doel, met de juiste navigatie — kunnen ze de pagina rust geven en content compact presenteren. Verkeerd ingezet kosten ze conversie en verbergen ze essentiële informatie.

Wat je leert in deze les

Je leert wanneer een slider wél en niet werkt, welke types sliders bestaan en hoe je ze technisch en UX-matig goed opzet. Je krijgt voorbeelden, veelgemaakte fouten en een checklist.

Wanneer werkt een slider wél

  • Voor secundaire content. Testimonials, logo-balken, productcarrousel op een productlijstpagina. Content waar "niet alles zien" geen verlies is.
  • Met duidelijke navigatie-pijlen. Bezoekers moeten zien dat er meer is en er gemakkelijk doorheen kunnen klikken.
  • Zonder auto-play op desktop. Bezoekers willen zelf bepalen wanneer ze verder kijken.
  • Met maximaal vijf tot zeven items. Meer wordt niet gezien.
  • Op mobiel als swipe-gebaar. Natuurlijke interactie op mobiel; daar werkt de slider-metafoor beter dan op desktop.

Wanneer werk een slider niet

  • In de hero. Vrijwel altijd een slechte keuze. Je belofte verdwijnt elke 4-5 seconden voor iemand hem kan lezen.
  • Voor kritieke verkoop-content. Oplossing, prijs, hoofd-USP's — deze horen niet in een slider waarvan de helft genegeerd wordt.
  • Met auto-play sneller dan 7 seconden. De lezer is nog aan het lezen als de slide al weg is.
  • Zonder navigatie of paginering. Een slider zonder zichtbare punten of pijlen oogt als één enkele afbeelding; bezoekers weten niet dat er meer is.
  • Op pagina's met veel tekst. Bewegende content naast statische tekst concurreert om aandacht en verliest beide.

De drie types sliders

  • Testimonial-slider. Drie tot zes quotes met foto, naam en functie. Werkt goed als secundaire bewijs-sectie.
  • Logo-slider. Horizontaal roterende logo-balk van klanten of media. Werkt als je meer logo's hebt dan op één rij passen, maar je toch alle wilt tonen.
  • Product- of project-slider. Carousel van producten op een categoriepagina of projecten op een portfolio-pagina. Werkt als secundaire weergave naast een grid-overzicht.

10 voorbeelden uit echte sites

  • swapfiets.nl — jong, sales, Framer (S9/C9/D8/Dev8/Con8). Testimonial-slider met klantverhalen, bedienbaar maar niet dominant. Secundaire bewijs-sectie in de onderste helft van de pagina.
  • mollie.com — professioneel, sales, Framer (S9/C8/D8/Dev9/Con9). Klant-logo-slider die langzaam roteert. Laat zien hoe je veel logo's kunt tonen zonder de pagina vol te gooien.
  • dopper.com — eigenzinnig, sales, custom (S9/C8/D8/Dev8/Con7). Productcollectie-carousel op de homepagina. Bezoekers swipen door flessen zonder op categoriepagina te klikken.
  • dapper.agency — eigenzinnig, branding, Webflow (S9/C8/D9/Dev9/Con8). Cases-carousel als alternatief voor een grid. Werkt omdat elk case-beeld op zichzelf staat.
  • welvaere.com — minimalistisch, sales, Webflow (S8/C8/D8/Dev7/Con7). Productkollektie-slider met grote beelden. Premium retail, slider als browser-functionaliteit.
  • photoclass.nl — professioneel, sales, Framer (S9/C9/D7/Dev7/Con9). Review-slider met foto en concrete transformatie. Laat zien hoe testimonials in slider-vorm kracht houden.
  • graphic-hunters.com — eigenzinnig, branding, Webflow (S8/C8/D9/Dev9/Con7). Portfolio-carousel per sport-categorie. Niche-filter via slider.
  • tonyschocolonely.com — eigenzinnig, branding, Shopify (S8/C8/D9/Dev7/Con8). Cadeau- en seizoensproductcarousel. E-commerce-slider met duidelijke CTA per slide.
  • ice-tubs.com — eigenzinnig, sales, Webflow (S9/C9/D8/Dev8/Con8). Product-situatie-slider waar je ijsbaden in verschillende omgevingen ziet. Visueel rijk en on-brand.
  • sambrosa.nl — minimalistisch, sales, Shopify (S8/C9/D8/Dev8/Con7). Klantreview-slider met specifieke situaties. Sluiter die door bezoekers zelf bediend wordt, geen auto-play.

De rol binnen de 5 emoties: Interesse

Het Slider-bouwblok valt onder de bouwsteen Interesse. Beweging trekt aandacht, mits niet overweldigend. De kern is echter: content die je belangrijk vindt, hoort niet in een slider. Sliders zijn voor "ook leuk om te zien", niet voor "dit moet je lezen".

Veelgemaakte fouten

  • Slider in de hero. Veruit de meest voorkomende fout. Je belofte verdwijnt voor bezoekers hem gelezen hebben.
  • Auto-play zonder bedieningsmogelijkheid. Bezoekers raken gefrustreerd als ze iets willen teruglezen.
  • Te veel slides. Slide 8 wordt door bijna niemand gezien. Kort houden op 3-7.
  • Geen zichtbare navigatie. Zonder pijlen of punten weten bezoekers niet dat er meer slides zijn.
  • Kritische verkoopargumenten in een slider. Alles wat belangrijk is, hoort zichtbaar — niet in een vak dat elke 5 seconden van inhoud wisselt.
  • Auto-play te snel. Sneller dan 7 seconden per slide kost leesbaarheid.

Checklist

  • De slider toont alleen secundaire content, geen kritieke verkoopargumenten.
  • Maximum vijf tot zeven slides.
  • Navigatiepunten of -pijlen zichtbaar.
  • Geen auto-play op desktop, of pauze-knop beschikbaar.
  • Op mobiel werkt swipe-gebaar natuurlijk.
  • Als er auto-play is: minimaal 7 seconden per slide.

Waar dit bouwblok hoort op je pagina

Voor testimonials (secundaire positie), logo-balken (horizontale carousel), product-of project-overzichten op categoriepagina's. Vermijd in de hero, op verkooppagina's voor kritische content, en op landingspagina's waar focus belangrijker is dan variatie.

Verder lezen

  • Gallerij bouwblok. De statische variant die vrijwel altijd beter werkt dan een slider.
  • Bewijs (Social Proof) bouwblok. Hoe testimonial-sliders passen in het bredere bewijssysteem.
  • Stap 12 — Zet je kernboodschap bovenaan. De reden waarom je belofte nooit in een hero-slider hoort.
Vorige les
Volgende les
slider-bouwblok
Geen vorige les
Geen volgende les