Skip to content

MEDIAS SCROLL-SNAP
CAROUSEL

LABEL GOES HERE

FULL WIDTH WITH PORTRAIT ONLY
( NO PAGER ON MOBILE )

This carousel have links attached to each slides, you can click on images or tab + press enter

My button
My other button
A table with a couple of dishes on it
Featured image

LABEL GOES HERE

FULL WIDTH WITH LANDSCAPE ONLY

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups Lorem ipsum is placeholder text commonly used in the graphic.

My button
Other button
outdoor pool and sunloungers at Bungalow pool bar and restaurant at Hyde Ibiza
beautiful table setting at Niko restaurant at Hyde Ibiza
Featured image
Image of a paelle served at Sonrojo with the logo over it
Featured image
1 / 5

LABEL GOES HERE

FULL WIDTH WITH MIX RATIO

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups Lorem ipsum is placeholder text commonly used in the graphic.

My button
Other button
Outside bar with bartender making drinks
Outside bar at Hyde Ibiza with bartender making drinks.
A table with a couple of dishes on it
breakfast image with multiple dishes including pancakes and yoghurts
image of the perq caffee with the logo over it
bohemian style decor with Table and chairs at Cuyo in Hyde Ibiza.
1 / 6

LABEL GOES HERE

FULL WIDTH WITH FEW SLIDES

Test on wide screens so you can see arrows + pager being hidden, and content should be centered

My button
Other button
image of bathroom at night with a dark blue view of the sky in the background
image of balcony with two chairs and a table
Balcony overlooking the pool at Hyde Ibiza.
1 / 3

LABEL GOES HERE

COLUMN LAYOUT #1

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups Lorem ipsum is placeholder text commonly used in the graphic.

Button
image of balcony with two chairs and a table
image of bathroom at night with a dark blue view of the sky in the background
Balcony overlooking the pool at Hyde Ibiza.
tv unti hanging on the wall with coffee station next to it and a bed showing through the door frame next to the tv
Featured image
Twin beds with white bedding and art work hanging above and besides it and a little seating area next to the bed
The outside pool with sun loungers at Hyde Bodrum
1 / 7

LABEL GOES HERE

COLUMN LAYOUT #2

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups Lorem ipsum is placeholder text commonly used in the graphic.

Other button
image of balcony with two chairs and a table
Balcony overlooking the pool at Hyde Ibiza.
tv unti hanging on the wall with coffee station next to it and a bed showing through the door frame next to the tv
Featured image
Twin beds with white bedding and art work hanging above and besides it and a little seating area next to the bed
The outside pool with sun loungers at Hyde Bodrum
1 / 6

0. How to add the Carousel in the Editor (setup step)

  1. In the block editor, add the Media Carousel (Scroll-snap) block
  2. Choose Manual mode when prompted (Featured in only accessible when in context)
  3. Upload or select multiple images
  4. (Optional) For each image:
    • – Click the link icon on the image
    • – Set a URL (and target if needed)
  5. In the block settings panel (right sidebar):
    • Enable or disable Mobile pagination
  6. Save / publish the page and test on the front-end

1. Visual & Layout Checks

Image orientation

Verify the carousel renders correctly in the following cases (all scenarios already built above):

Expected:

2. Ordering & Content

3. Desktop Behaviour

4. Mobile Behaviour

5. Image Links (Manual Mode)

If image links are set in the editor:

7. Accessibility Checks

Keyboard

Screen reader

8. Out of scope : Featured mode

Since this carousel is extending the existing “media carousel” – it can be used on any post type using featured images with “featured” mode instead of manual.
It will then pull the content from the featured images attached to the post, so this component could be use within Query Loop block or on single pages like on the examples bellow :

SINGLE OFFER PAGE ( block added at the bottom )

offers name up to two lines and the longer will get trimmed another one

QUERY LOOP LISTING ( Non exisiting in Figma ) :

Offer listing with Carousel