Sliding gallery with a Layouter

1. Add a container to a blank section and stretch it.

2. Apply a 3x1 grid to the container. 

3. Drag a Layouter from the Add panel into the middle grid cell and stretch it to fill the cell. 

4. Add an image to each Layouter item. Stretch each one to fill the item. 

5. Select the Layouter. From the dropdown in the floating menu, change the display type to Slides. 

6. From the Inspector panel add navigation, then choose Arrows. Change the arrows by selecting each one and clicking Change Basic Shape. 

7. Set the width and height of both arrows to 80px.

8. Select the “previous” arrow, and from the Inspector panel, make sure the position type is set to Pinned. Then pin it to the section. Do the same for the “next” arrow. 

9. Add a text element and position it next to the “previous” arrow. Change the text to “Previous Project.” Set the width of the text element to Max content. Duplicate the text element, edit the duplicate to say “Next Project” and position it beside the “next” arrow. 

10. Hold down the shift key and select the “previous” arrow and the “Previous Project” text element. In the floating menu, choose Place in Container. 

11. Select the container and set its width to Max content. Apply a 2x1 grid. From the Inspector panel, add a 20px gap between the grid columns. 

12. Set the width of each grid column to Max content. Make sure the text and arrow elements are positioned in the correct grid cell from the Inspector panel. 

13. Repeat steps 10-12 for the “next” arrow and “Next Project” text element. 

14. Select the container with the “previous” arrow and text and use the alignment icons in the Inspector panel to align it to the vertical center and left side. Add a left margin of 20px. Select the “next” container, center it vertically and align it to the right with a right margin of 20px. 

15. Preview the result. The images are laid out in a gallery and you can click to scroll between them.