Carousel or slider: picking the right Shopify gallery layout

Two of the nine layouts in Snug Gallery move sideways, and merchants mix them up all the time. The carousel shows several images at once and scrolls through them a step at a time. The slider shows one image at a time and behaves like a classic hero slideshow. They share a track, a pair of arrows and a lightbox, and almost nothing else. This guide sets the two side by side so you can choose on purpose rather than by trying both and keeping whichever looked less broken in the editor.

Where the layout is chosen

Layout belongs to the gallery itself, not to the theme block. Open the gallery in the Snug Gallery app, set its layout to Carousel or Slider, and every block that renders this gallery follows. The theme editor block keeps the settings that depend on the page: columns, image shape, captions, hover effect, and, for the slider only, autoplay. Changing the layout in the app does not reset any of those.

The reason for the split is that a gallery often appears in more than one place, a product page and a landing page for instance, and you want the same set of images to be the same kind of thing everywhere. Columns and image shape, on the other hand, genuinely depend on how wide the section is, so they stay with the block.

How the carousel moves

The carousel lays the images out in a single horizontal row and shows as many as fit your Columns setting: up to six on desktop, four on tablet, and one or two on mobile. Each press of an arrow moves the row by exactly one item, including the gap, so the images stay aligned to the left edge instead of landing half-visible. On a touch screen the row is a plain horizontal scroll, so a swipe behaves the way every other sideways list on the phone does.

The row does not loop. When you reach the first item the previous arrow is disabled, when you reach the last the next arrow is disabled, and the disabled state is a real disabled attribute, so keyboard users and screen readers get the same signal as the greyed-out icon. There are no dots under a carousel. With five items visible at a time a dot per item would be misleading, and a dot per page is a guessing game once the viewport changes width.

Hover effects, captions and the lightbox all work on the carousel exactly as they do on a grid. For a product page that needs to show twelve lifestyle shots in the width of two, a carousel with captions set to show on hover is the layout we end up recommending most often.

How the slider moves

The slider shows one item per view, full width, with a dot for each item underneath and the two arrows. It wraps: the next arrow on the last slide goes back to the first, and the previous arrow on the first slide jumps to the last. The dots do double duty, showing the current position with aria-current and jumping straight to a slide when clicked. Each dot is labelled Slide 1, Slide 2 and so on for assistive technology.

The slider track is focusable and announced as a carousel. Tab to it and the left and right arrow keys move between slides, which is something the carousel does not offer because its native scroll already responds to the keyboard once it has focus. The slider is also the only layout with autoplay, covered in detail in the autoplay guide, including every situation in which it pauses.

With fewer than two items both arrows are hidden and the dots disappear, because a slideshow of one image is just an image. That is a sensible fallback for a gallery that is temporarily down to a single photo, but if a gallery is permanently one image, a grid with one column is the more honest choice.

Tall and wide images in the same set

This is where the two layouts differ most. In a carousel every item has the same aspect ratio from the Image shape setting, and a photo that does not fit is cropped to it, exactly as on a grid. Mixed portrait and landscape photos look tidy, and the crop is the price. If you need the full frame of every image, choose Original and the items keep their own proportions, which makes the row ragged but complete.

The slider with Image shape set to Original does something different. Snug Gallery looks at the dimensions of every image in the gallery, finds the tallest proportion among them, and gives every slide that ratio, capped at square so one extreme portrait shot cannot turn the slider into a tower. Images that are wider than the chosen ratio are then shown whole, letterboxed against the slide background, instead of being cropped. A fixed-height slideshow where no photo loses its edges is what most lookbooks want, and this is how you get it.

If an image arrives without dimensions, for example a very old upload, the slider falls back to 16:9 for that calculation. The CSS also caps the slide height on tall screens so a square slider on a phone held upright does not push everything below it off the bottom.

Motion, re-rendering and the editor

Both layouts scroll smoothly by default. A visitor whose operating system asks for reduced motion gets instant jumps instead, in both the carousel and the slider, and the slider skips autoplay for them entirely. Nothing to configure; the browser tells the gallery and the gallery listens.

Both also survive the theme editor. When you change a setting and Shopify re-renders the section, the gallery picks up the new markup and reinitialises arrows, dots and keyboard handling, so you never have to reload the preview to see whether a change took. The same hook fires when a theme loads sections dynamically on the storefront.

Which one to pick

Choose the carousel when the images are peers: product shots, customer photos, press logos, a row of before-and-after pairs. The visitor sees several at once, compares, and scrolls for more. Choose the slider when each image deserves the whole stage: a campaign hero, a lookbook where every photo is a styled scene, a set of three banners you want to rotate. The visitor sees one, reads it, moves on.

Two quick tests settle most cases. If a visitor would want to see two of these images next to each other, it is a carousel. If you are tempted to switch autoplay on, it is a slider. And if neither sideways layout feels right, the gallery probably wants to be a grid or masonry after all; the point of having nine layouts is that scrolling sideways is a choice, not a default.

Frequently asked questions

Can a carousel loop back to the first image?

No. The carousel is a horizontal row with a real start and end, and its arrows disable at each edge. Looping is a slider behaviour. If you want a row of several images that wraps around, the closest option is a slider with Image shape set to a wide ratio, but it still shows one item per view.

Why does my slider have no arrows?

Arrows and dots are hidden when the gallery has fewer than two visible items. Check that the gallery actually contains more than one image, that the images have finished processing, and that a tag filter on the block is not narrowing the set down to one.

Does the carousel support autoplay?

No. Autoplay is a slider-only setting, and it only appears in the theme editor once the gallery layout is Slider. A carousel that moved on its own would pull images out from under the visitor while they are comparing them, which is exactly what a carousel is for.

Which layout is better for mobile?

Both work, differently. The carousel on a phone becomes a native horizontal scroll with one or two items visible, which feels familiar. The slider shows one image at a time at full width, with the height capped so it never fills the whole screen. If the images are portrait product shots, the carousel usually wins; for landscape campaign photos, the slider.