About this block
A slideshow that shows one photo at a time across the full width of its container. Visitors move through it with the arrow buttons on each side or the dots along the bottom. It's a compact way to show several photos without taking up a whole gallery's worth of space.
When to use it
- Showing a few project or product photos at the top of a page without stacking them.
- A portfolio or case study where each photo deserves the full width.
- Rooms, venues or properties, where people want to click through the space.
- Any spot where a grid of small thumbnails would make each photo too small to read.
What's inside
- 3 photos in a row that slides sideways, one photo in view at a time, with rounded corners.
- Round previous and next arrow buttons on the left and right edges. They loop from the last photo back to the first.
- A row of dots at the bottom. The current photo's dot fills with your primary colour, and clicking a dot jumps to that photo.
- The height grows with the screen: 256px on phones, 320px from 640px wide and 448px from 768px wide. Photos crop to fill it.
How to customize it
- Swap each photo in the Image settings and write alt text that says what's in it.
- To add a 4th photo, duplicate a slide, duplicate a dot and set its value to 3, then raise the highest slide number on both arrows from 2 to 3.
- Change the height classes on the slides if your photos are tall or panoramic.
- Restyle the arrows and dots with your own colours, or move the dots below the photos.
Questions
- Does the carousel play on its own?
- No. It moves only when a visitor clicks an arrow or a dot, which keeps people in control and avoids photos sliding away while someone is looking at them.
- Does it work on phones?
- Yes. It shows one full-width photo at a time on every screen size, and the arrows and dots work with a tap.
- Is it accessible?
- The arrows and dots are real buttons with names like "Next slide" and "Go to slide 2", so keyboard and screen reader users can move through the photos. Each photo keeps its own alt text.