# Multiple slides per view: a carousel with 3, 2 and 1 slides

URL: https://gutenslider.org/multiple-slides-per-view-example/
Published: 2026-10-07
Updated: 2026-10-07

> Show several slides side by side: slides in view per device, slides per step, the gap, a centered active slide and slides with their own width. Free, with a live example.

A carousel shows several slides side by side and moves one or more at a time. In Gutenslider you set how many slides are visible per device, how far one click moves and the gap between them, all in the free plugin.

The [carousel example](https://gutenslider.org/examples/#carousel): three photos on desktop, two on tablets, one on phones.

### Set up a carousel

- Add the **Gutenslider** block and choose your images; six or more work best for a carousel.
- In the **Slides** panel, set ** Slides in view** to 3 with the desktop switch on, then switch to tablet and set 2, and to phone and set 1. Up to eight slides per view are possible.
- Set **Space between slides** per device, for example 16, 12 and 10 pixels.
- Choose how far one arrow click moves with **Slides per step**: one slide at a time, or a whole page of slides.

Carousels need the **Slide** effect; fade and the 3D effects show one slide at a time (Coverflow is the exception, it shows the neighbours tilted).

### Centered or aligned left

**Center the active slide** (in the Motion panel) keeps the active slide in the middle, with parts of its neighbours at the edges, a hint that there is more to swipe. Turn it off to start with the first slide at the left edge.

### Slides with their own width

Pick **Width from content** in *Slides in view* and each slide keeps its own width, for example portrait and landscape photos at the same height, or a strip of logos. See the [auto-width example](https://gutenslider.org/examples/#auto-width).

### Tips

- Turn on the [lightbox](https://gutenslider.org/docs/lightbox/) so visitors can open a photo large; it grows out of the clicked image.
- Use images with the same aspect ratio, or set a fixed [height](https://gutenslider.org/adaptive-height-slider/) so the row looks even.
- For a carousel of cards with text, put a Group block with an image, heading and button on each slide.