MEDIA SCROLL-SNAP
CARROUSEL

0. Hoe voeg je de carrousel toe in de editor (installatiestap)

1. Voeg in de blok-editor het blok Media Carousel (Scroll-snap) toe.
2. Kies de handmatige modus wanneer daarom wordt gevraagd (alleen beschikbaar in de juiste context)
3. Meerdere afbeeldingen uploaden of selecteren
4. (Optioneel) Voor elke afbeelding:
   • – Klik op het linkpictogram op de afbeelding
   • – Stel een URL in (en indien nodig een doel)
5. In de instellingenpaneel blokkeren (rechterzijbalk):
   • Mobiele paginering in- of uitschakelen
6. Sla de pagina op/publiceer deze en test deze op de front-end.

1. Visuele controles en lay-outcontroles

Beeldoriëntatie

Controleer of de carrousel correct wordt weergegeven in de volgende gevallen (alle scenario's zijn hierboven al beschreven):

• Mix van staande en liggende afbeeldingen
• Alleen landschapsfoto's
• Alleen portretfoto's

Verwacht:

• De oriëntatie wordt automatisch afgeleid uit de beeldverhouding.
• Dia's behouden een consistente hoogte (dit is een instelling in de zijbalk, standaard: 450px)
• De lay-out komt overeen met Figma op desktop en mobiel

2. Bestelling & inhoud

• Afbeeldingen worden weergegeven in de exacte volgorde die in de editor is ingesteld (klik op 'Afbeeldingen bewerken' om de volgorde te wijzigen met slepen en neerzetten).
• Het opnieuw ordenen van afbeeldingen in het CMS werkt de volgorde in de front-end bij.

3. Gedrag op het bureaublad

• Links/rechts-pijlen zijn zichtbaar op het bureaublad
• Met de pijltjes kunt u tussen de dia's navigeren.
• Carousel scrolt niet voorbij de eerste of laatste dia
• Het gedrag van het bredere scherm komt overeen met Figma (geen pijlen en gecentreerde inhoud).

4. Mobiel gedrag

• Veeg naar links/rechts om door de dia's te bladeren
• Het scroll- en klikgedrag van Native voelt soepel aan.
• Paginering 1 / n:
  • Wordt alleen weergegeven op mobiele apparaten
  • Wordt alleen weergegeven als dit is ingeschakeld in de blokinstellingen
  • Geeft de huidige dia-index correct weer

5. Afbeeldingslinks (handmatige modus)

Als er afbeeldingslinks zijn ingesteld in de editor:

• Door op een afbeelding te klikken, gaat u naar de geconfigureerde URL.
• Afbeeldingen zonder link zijn niet aanklikbaar.
• Gekoppelde afbeeldingen werken correct op mobiele apparaten en desktops

7. Toegankelijkheidscontroles

Toetsenbord

• Carrouselknoppen kunnen worden geselecteerd met Tab
• Pijltjestoetsen kunnen worden geactiveerd met Enter
• De pijltjestoetsen (rechts/links) bedienen de carrousel.
• Gekoppelde afbeeldingen kunnen worden geactiveerd via het toetsenbord

Schermlezer

• De inhoud wordt in logische volgorde gelezen.
• Paginering en navigatieknoppen worden correct aangekondigd

8. Buiten het bereik: Uitgelichte modus

Aangezien deze carrousel een uitbreiding is van de bestaande "mediacarrousel", kan deze worden gebruikt voor elk berichttype dat gebruikmaakt van uitgelichte afbeeldingen in de modus "uitgelicht" in plaats van handmatig.
De inhoud wordt dan opgehaald uit de uitgelichte afbeeldingen die aan het bericht zijn toegevoegd, zodat dit onderdeel kan worden gebruikt binnen het Query Loop-blok of op afzonderlijke pagina's, zoals in de onderstaande voorbeelden:

ENKELE AANBIEDINGSPAGINA (blok onderaan toegevoegd)

QUERY LOOP LISTING (niet aanwezig in Figma):