Een eigen carrousel om inhoud horizontaal te laten doorschuiven — zonder externe library, met soepele scroll-snap. Handig voor uitgelichte items, logo's of foto's.
Toepassingen per site-type
Een webshop gebruikt Swiper vaak voor 'vaak samen gekocht'-rijen of een reeks aanbevolen producten, waarbij elke slide een productkaart is. Een portfolio-site zet dit block in voor een rij klantlogo's of testimonials, die rustig langs kunnen scrollen zonder de aandacht van de hoofdinhoud af te leiden. Bij een zakelijke dienstverlener werkt Swiper goed voor een rij diensten of kernwaarden die net niet allemaal op één regel passen, zoals vier of vijf kaarten op een breed scherm die op mobiel na elkaar doorschuiven.
Een veelgemaakte fout is te veel inhoud in één slide proppen, waardoor de slide zelf al niet meer op een mobiel scherm past en de bezoeker binnen de slide ook nog moet scrollen. Houd elke slide compact en van gelijke breedte. Een tweede valkuil is geen duidelijke rand of scheiding tussen slides, waardoor niet duidelijk is waar de ene slide ophoudt en de volgende begint.
Voor foto's met zoom-functie is de ImageGallery geschikter dan Swiper. Combineer Swiper met GsapReveal om de hele rij rustig te laten instromen zodra de bezoeker bij die sectie scrollt, in plaats van dat de rij meteen statisch aanwezig is.
Omdat Swiper op scroll-snap draait in plaats van een zware externe library, blijft de sectie licht en soepel, ook op oudere telefoons. Zorg wel dat elke slide met het toetsenbord bereikbaar is via tab-toetsen, zodat bezoekers zonder muis ook door de rij heen kunnen.
Gebruik dit block voor een rij items die net niet allemaal op het scherm passen: klantlogo's, uitgelichte producten of een reeks kaarten met diensten. Bezoekers vegen of scrollen horizontaal, met soepele scroll-snap zodat elk item netjes uitlijnt.
Voor een carrousel met alleen foto's, thumbnails en een zoom-functie is de ImageGallery geschikter; de Swiper is lichter en flexibeler omdat je zelf bepaalt wat er in elke slide staat.
<Swiper> <Box>Slide 1</Box> <Box>Slide 2</Box> </Swiper>