Building a slider using a Layouter

Part 1: Section structure.

Let’s start with how the section is structured. The section is divided into a grid with one column and 3 rows. Each row also has a container that is stretched to fill it. In the middle row, where we’re going to create our slider, we’ve applied a 3X3 grid to lay out our elements. Also note, the section has padding of 35 pixels to the left and right.

Part 2: Set up the Layouter.

1. Open the Add panel

2. Drag a Layouter into the container in the middle row of the section

3. From the floating action bar, change the Layouter type to Slides

4. Delete one item from the Layouter (there should be a total of 3)

5. Remove the background color from each item

6. From the Inspector panel, under Location in grid cells, make sure the Layouter spans all grid cells in the container

7. Stretch it to fill the container

Part 3: Add media.

1. With the first Layouter item selected, add the first image

2. Align the image to the center and middle

3. Set its width to 50%

4. Dock it to the top of the Layouter item

5. Set the top margin to 4%

6. Scroll to the second layouter item and add the second image

7. Align it to the center and middle

8. Set the width to 90%

9. Dock it to the top with a 12.5% top margin

10. Add the third image to the third Layouter item

11. Center the image

12. Set the image width to 80%

13. Dock to the center with zero margins

Result: When we preview and scroll side-to-side, the images slide. The design is also responsive. Now we need a few finishing touches.

Part 4: Finalize the design.

First, we want to hide the scroll bar.

1. Select the Layouter

2. From the Inspector panel, switch off the Show scrollbar toggle

Next, you might have noticed that when the items slide in and out to the left and right, they cut out at the edge of the container instead of at the edge of the screen. This is because the Layouter is stretched to fill the container, but the section has 35px padding on each side. Let’s see how to change this:

1. Select the Layouter

2. Set the left and right margins to -35px

Finally, let’s add some navigation arrows to scroll between items.

1. With the Layouter selected, open the Inspector panel

2. Under Navigation, click Add and choose Arrows

3. Select the Prev button and choose Change Basic Shape from the floating action bar

4. Choose the arrow we’re using in this design

5. Under Adjust, choose Flip horizontally

6. Resize the arrow to 75px width and 65px height

7. Do the same for the Next button

8. Change the position of both arrows so they’re pinned to the container instead of to the Layouter. Now we can position them within the grid

9. Position the arrows to the right side of the top middle grid cell

10. Dock each of them to the right

11. Set their sizing to Fluid

Final result: We have a fully responsive slideshow created using a slides Layouter.