Naar inhoud
FFrosthaven Lab

05 — 10 varianten

Carousels

Marquees, drag-snap sliders, coverflow, testimonials en logo-rijen. Alles zonder externe slider-library.

Logo marquee

csssocial proof
VerhoevenCasa NovaMarina AltaDelgadoNordwerkVega BauVerhoevenCasa NovaMarina AltaDelgadoNordwerkVega Bau

Verdubbel de lijst en verschuif hem 50%, dan is de loop naadloos. De mask-fade aan beide zijden is wat het professioneel maakt.

Marquee tegen elkaar in

css
VerhoevenCasa NovaMarina AltaDelgadoNordwerkVega BauVerhoevenCasa NovaMarina AltaDelgadoNordwerkVega Bau
Vega BauNordwerkDelgadoMarina AltaCasa NovaVerhoevenVega BauNordwerkDelgadoMarina AltaCasa NovaVerhoeven

Twee rijen die tegengesteld lopen. Meer beweging zonder meer snelheid; prettiger voor de ogen dan één snelle rij.

Drag & snap

cssmobiel
project 1

Project 1

project 2

Project 2

project 3

Project 3

project 4

Project 4

project 5

Project 5

Puur CSS scroll-snap, geen library. Werkt met touch, muiswiel en toetsenbord tegelijk. Dit is bijna altijd de juiste keuze voor een projectrij.

Coverflow 3D

js3d

klik op een kaart

Kaarten draaien weg in de diepte. Visueel sterk voor een fotogalerij, maar de zijkaarten zijn slecht klikbaar op mobiel.

Crossfade + dots

jsauto
slide 1
slide 2
slide 3

Rustigste slidervorm: alleen opacity, geen beweging. Voor een hero-achtergrond die om de paar seconden wisselt is dit de juiste keuze.

Auto met voortgangsbalk

jsauto
slide 1
slide 2
slide 3

De balk vertelt hoelang de slide blijft staan. Voorkomt dat bezoekers denken dat de site vastloopt; verplicht bij auto-play langer dan drie seconden.

Thumbnails gesynchroniseerd

jsvastgoed
foto 1

Grote foto met miniaturen eronder. De standaard voor pandpagina's en productdetail; de actieve rand moet 2px zijn, dunner ziet niemand.

Testimonial slider

jssocial proof

“Binnen twee dagen stond alles klaar. Nooit meer omkijken naar.”

Marieke de Vries

Jávea

Eén review tegelijk met pijlen. Zet een min-height op de tekst, anders springt de kaart bij reviews van verschillende lengte.

Verticale ticker

css
live

Nieuw project opgeleverd in Moraira

Zomerplanning is open

Vandaag geopend tot 18:00

Nieuw project opgeleverd in Moraira

Zomerplanning is open

Vandaag geopend tot 18:00

Voor nieuwsregels, openingstijden of live meldingen. Neemt weinig ruimte en trekt toch het oog; niet gebruiken voor iets wat gelezen moet worden.

Swipe stack

jsauto
Kaart 1
Kaart 2
Kaart 3

Kaarten rouleren van boven naar achter. Compact en speels; goed voor drie tot vijf uitgelichte items in een smalle kolom.