Gallery: Wraparound
An endless strip of pictures slides sideways and bends toward the visitor at the screen's edges, like curved glass, with a heading and button underneath.
A strip of pictures travels sideways and never ends: after the last picture comes the first again. Near the left and right edges of the screen the pictures curve toward the visitor, like a sheet of bent glass, with a thin rainbow edge where the bend is strongest. A heading and a button sit under the strip. Visitors can drag the strip themselves.
Choose it when you want a gallery that feels like an object rather than a grid. For a flat moving row, see Gallery: Stream.
Add it
It can go on any page except the password page, and not in the header or footer. In "Add section", find Gallery: Wraparound under Slideshows & galleries.
As first added it fills the screen with six placeholder pictures sliding slowly on their own, the heading "New season, every angle" and a "Shop now" button leading to all your products.
What you need
- Six or more pictures. A short strip is repeated to fill the screen.
- Pictures of any shape. Each is shown whole at the strip's height, so the strip is a row of different widths.
Settings
Select the section itself to see these.
| Setting | What it changes | Options |
|---|---|---|
| Color scheme | The background, the text under the strip and the button. See shared settings. | Default: Scheme 1. |
| Space above, Space below | Empty space above and below. See shared settings. | Default here: None. |
Blocks
Strip
Always there. It holds the pictures and the text, and sets how everything looks and moves.
| Setting | What it changes | Options |
|---|---|---|
| Image height | How tall the pictures are. | Small, Medium, Large. Default: Medium. |
| Gap between items | The space between pictures. | None, Small, Medium, Large. Default: Medium. |
| Corners | How round the pictures' corners are. See shared settings. | None, Slight, Round. Default: None. |
| Movement | What moves the strip. See below. | Slides as the page scrolls, Stays on screen while it slides, Slides slowly on its own, Still until moved. Default: Slides slowly on its own. |
| Height | How tall the section is. Hidden with Stays on screen while it slides, which always fills the screen. | Full screen, Large, Medium. Default: Full screen. |
| Pause on hover | On: the strip stops while the mouse is over it. Only appears with Slides slowly on its own. | On or off. Default: off. |
| Bend | How far the pictures curve toward the visitor at the edges. | Subtle, Medium, Strong. Default: Medium. |
| Bent edges | Which edges bend. With one side only, the other stays flat. | Both sides, Left side only, Right side only. Default: Both sides. |
| Color split at the edges | A thin rainbow edge where the bend is strongest, like light through glass. | On or off. Default: on. |
Movement, option by option:
- Slides as the page scrolls: the strip moves sideways as the visitor scrolls past it.
- Stays on screen while it slides: the section fills the screen and holds still while scrolling slides the strip round once; then the page carries on.
- Slides slowly on its own: the strip keeps moving. It stops while a visitor drags it, taps it on a phone (until they tap elsewhere), or tabs into it.
- Still until moved: only the visitor moves it, by dragging.
Image
One picture in the strip. Add, move or remove as many as you like.
| Setting | What it changes | Options |
|---|---|---|
| Image | The picture, always shown whole at the strip's Image height. | |
| Link | Where the picture goes when clicked. Screen readers name the link from the picture's alt text, so describe the picture there. | Any link. |
| Open link in a new tab | Only appears once Link is filled in. | On or off. Default: off. |
Text
Always there, under the strip, and stays on screen with it. It holds a Heading and a Button as added; you can add a Description and most other blocks, or remove them all to show only the pictures. Alignment sets where they sit: Left, Center or Right (default Center).
On phones
The bent edges are narrower, so more of the strip stays flat in the middle. Visitors swipe the strip sideways; with Slides slowly on its own, a tap stops it.
Tips
- Pictures with plain backgrounds show the bend most clearly. Busy pictures can look warped at the edges.
- Choose Subtle for Bend if you have text in your pictures, so it stays readable as it reaches the edge.
- With Stays on screen while it slides, put the section near the top of a page, so visitors are not surprised by a pause in their scrolling halfway down.
- Keep the heading short. It sits under the strip, not over it.
Good to know
- Visitors who have asked their device to reduce motion, or whose browser has scripts off, see a plain row they can scroll sideways, with no bend.
- On an older device or browser that cannot draw the bend, the strip stays flat but works the same way.
- The strip stops while it is off screen.
- There is no pause button. Dragging, tapping or tabbing to it stops it.