Responsive Gallery

A common need is showing several slides on desktop but fewer on mobile. Splide’s breakpoints option overrides any options below a given screen width, so a single slider adapts as the viewport shrinks.

The slider

<template>
  <Splide :options="options" aria-label="Photo gallery">
    <SplideSlide v-for="photo in photos" :key="photo.id">
      <img :src="photo.src" :alt="photo.alt">
    </SplideSlide>
  </Splide>
</template>

<script setup lang="ts">
const options = {
  type: 'loop',
  perPage: 4,
  perMove: 1,
  gap: '1rem',
  pagination: true,
  arrows: true,
  breakpoints: {
    1024: { perPage: 3 },
    768: { perPage: 2 },
    480: { perPage: 1, arrows: false },
  },
}

const photos = [
  { id: 1, src: '/gallery/1.jpg', alt: 'Mountains at dawn' },
  { id: 2, src: '/gallery/2.jpg', alt: 'A quiet lake' },
  { id: 3, src: '/gallery/3.jpg', alt: 'City skyline' },
  { id: 4, src: '/gallery/4.jpg', alt: 'Desert dunes' },
  { id: 5, src: '/gallery/5.jpg', alt: 'Forest trail' },
  { id: 6, src: '/gallery/6.jpg', alt: 'Coastal cliffs' },
]
</script>

<style>
img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0.5rem;
}
</style>

How the breakpoints work

breakpoints is keyed by maximum width in pixels — each entry applies at or below that width. With the config above:

Viewport width	Slides shown
`> 1024px`	4 (the base `perPage`)
`≤ 1024px`	3
`≤ 768px`	2
`≤ 480px`	1 (and arrows hidden)

Any option can be overridden per breakpoint, not just perPage — here arrows are turned off on the smallest screens.

Next steps

Unstyled (Core Theme) — style the slider entirely yourself.
Configuration — the available themes.