Slider

The Slider shows a set of slides one after another. Each slide is a Slide component that holds an image or any content. The Slider can play by itself, loop, follow a swipe or a mouse drag, show several slides at once, and change slides with effects like fade, zoom, flip and cube. It works in right-to-left pages and respects the user's reduced motion setting.

Put Slide components inside a Slider. By default the Slider plays by itself and shows arrows, dots, a timer bar and a pause button.

Image Slider

Give a Slide an image with src and alt.

Svelte

<Slider>
  <Slide src="..." alt="..." />
  <Slide src="..." alt="..." />
  <Slide src="..." alt="..." />
</Slider>

<Slider>
  <Slide class="h-72 flex-col gap-2 bg-yellow-200">
    <h3>Build Faster</h3>
    <p>...</p>
  </Slide>
  <Slide class="h-72 flex-col gap-2 bg-rose-200"> ... </Slide>
  <Slide class="h-72 flex-col gap-2 bg-teal-200"> ... </Slide>
</Slider>

Linked Slides

Add href to make the whole slide a link. The link is named by the image alt or by the slide content, so write an alt that describes where it goes. A drag or swipe never follows the link. Don't put other links or buttons inside a linked slide.

Svelte

<Slider>
  <Slide href="/summer" src="..." alt="Shop the summer collection" />
  <Slide href="/new" src="..." alt="See the new arrivals" />
</Slider>

The controls prop shows the previous and next buttons, and the indicator prop shows a dot for each slide. Both are true by default; set them to false to hide them. When the slider doesn't loop, the previous button is disabled on the first slide and the next button on the last.

Svelte

<Slider indicator={false} controls={false}> ... </Slider>

Without controls, users can still change slides by swiping or with the keyboard.

Replace the arrow icons of the previous and next buttons with the prevButton and nextButton snippets. The buttons keep their accessible names.

Svelte

<Slider>
  <!-- Previous button -->
  {#snippet prevButton()}
    <Svg size={2} class="opacity-50">
      <path fill-rule="evenodd" d="M1 8a7 7 0 1 ... 1 .708.708L5.707 7.5z"/>
    </Svg>
  {/snippet}
  <!-- Next button -->
  {#snippet nextButton()}
    <Svg size={2} class="opacity-50">
      <path fill-rule="evenodd" d="M1 8a7 7 0 1 ... 1 0-.708.708L10.293 7.5z"/>
    </Svg>
  {/snippet}

  <Slide src="..." alt="..." />
  <Slide src="..." alt="..." />
  <Slide src="..." alt="..." />
</Slider>

The autoPlay prop moves to the next slide by itself. It is true by default. At the last slide of a slider that doesn't loop, it goes back to the first slide.

Auto play pauses while the mouse is over the slider and continues from where it stopped when the mouse leaves. Set stopOnHover to false to keep it running. Auto play also pauses while keyboard focus is inside the slider, while the slider is scrolled out of view and while the browser tab is hidden. Moving to another slide restarts the timer.

Svelte

<Slider stopOnHover={false}> ... </Slider>

When auto play is on, a pause button in the bottom corner stops and restarts it. Content that moves by itself needs a way to stop it, so keep this button unless you give users another one. Hide it with pauseButton={false}.

Use bind:paused to read the paused state or to pause the slider from your own control.

Pause

Svelte

<script>
  let paused = $state(false)
</script>

<button onclick={() => paused = !paused}>{paused ? "Play" : "Pause"}</button>

<Slider bind:paused pauseButton={false}> ... </Slider>

The timer prop shows a progress bar at the top that fills up until the next slide. It is true by default and only shows while auto play is on. The fraction prop shows a counter like 2 / 5 in the top corner. It is false by default. Use either one, both, or neither.

Svelte

<Slider timer={false} fraction> ... </Slider>

The slideDuration prop sets how long each slide stays, in milliseconds, before auto play moves to the next one. Default is 5000 (5 seconds).

Svelte

<Slider slideDuration={2000}> ... </Slider>

In the example each slide stays for 2 seconds.

The transitionDuration prop sets how long the move between two slides takes, in milliseconds. Default is 750. Set it to 0 to change slides instantly.

Svelte

<Slider transitionDuration={2000}> ... </Slider>

In the example each move takes 2 seconds.

The activeSlide prop sets the slide shown first, starting from 1. Default is 1. A number above the slide count shows the last slide.

activeSlide is bindable: bind:activeSlide follows the current slide, and changing the bound value moves the slider. The onchange callback runs with the new slide number every time the slide changes.

Current slide: 2 Show 1Show 2Show 3

Svelte

<script>
  let active = $state(2)
</script>

<button onclick={() => active = 1}>Show 1</button>

<Slider bind:activeSlide={active} onchange={(slide) => console.log(slide)}> ... </Slider>

By default the slider loops: after the last slide comes the first one, without a jump back. Set loop to false to stop at the first and last slides.

Svelte

<Slider loop={false}> ... </Slider>

The effect prop sets how one slide changes to the next: "slide" (default), "fade", "zoom", "flip" or "cube". Every effect follows a swipe or drag step by step. perView, gap, peek and centered only work with "slide".

Fade

The slides cross-fade.

Svelte

<Slider effect="fade"> ... </Slider>

Zoom

The new slide grows in while the old one grows past its size and fades out.

Svelte

<Slider effect="zoom"> ... </Slider>

Flip

The slide flips like a card, side to side. In a vertical slider it flips top to bottom.

Svelte

<Slider effect="flip"> ... </Slider>

Cube

The slides are the sides of a turning cube. In a vertical slider the cube turns up and down.

Svelte

<Slider effect="cube" class="bg-gray-900"> ... </Slider>

The kenBurns prop slowly zooms and pans each image while its slide is shown, each slide in a different direction. It works with every effect and only on image slides (a Slide with src).

Svelte

<Slider effect="fade" kenBurns transitionDuration={1500}> ... </Slider>

Set direction="vertical" to move the slides up and down. A vertical slider needs a height; it is h-96 by default and you can change it with class. The Up and Down arrow keys change slides, the controls sit at the top and bottom, and the dots move to the side.

Svelte

<Slider direction="vertical" class="h-80"> ... </Slider>

Slides Per View

The perView prop shows several slides at once, like a carousel, and gap sets the space between them. gap takes a number of pixels or any CSS length like "1rem". The slider still moves one slide at a time.

Svelte

<Slider perView={3} gap={16}> ... </Slider>

Responsive

perView, gap and peek also take a value per screen size, using the Tailwind breakpoints: base, sm, md, lg, xl and 2xl. The largest matching screen size is used. Resize the window to see it change.

Svelte

<Slider perView={{ base: 1, sm: 2, lg: 3 }} gap={{ base: 8, lg: 20 }}> ... </Slider>

The screen size is known only in the browser, so a page rendered on the server starts with the base value.

Peek

The peek prop shows a part of the previous and next slides at the edges, so users can see there is more. It takes a number of pixels or any CSS length. The peeking slides can't be reached with the keyboard until they move into view.

Svelte

<Slider peek={{ base: 24, md: 80 }} gap={16}> ... </Slider>

Centered

The centered prop places the active slide in the middle, with the other slides on both sides. It is useful with perView. Without loop, the first and last slides are centered too, with empty space beside them.

Svelte

<Slider centered perView={3} gap={12}> ... </Slider>

To loop, a slider needs more slides than it can show at once: at least perView + 1, or perView + 3 with peek. With fewer slides it stops at the ends.

The thumbnails prop shows a strip of small images under the slider. Clicking one opens its slide, and the active thumbnail stays in the middle of the strip. A thumbnail uses the slide's src; set the thumbnail prop on a Slide to use another image, or for a content slide. A slide without an image shows its number. You can hide the dots with indicator={false}.

Svelte

<Slider thumbnails indicator={false}>
  <Slide src="..." alt="..." />
  <Slide src="..." alt="..." thumbnail="small-image.jpg" />
  <Slide thumbnail="preview.jpg"> <!-- Custom content --> </Slide>
</Slider>

Users can swipe on touch screens and drag with the mouse. The slides follow the finger, and a move of a small part of a slide is enough to change it. A drag never clicks a link or button inside the slide. Turn it off with swipe={false}.

The mousewheel prop changes slides with the mouse wheel or a trackpad, one slide per gesture. It is false by default because it takes over page scrolling while the pointer is on the slider. Without loop, the page scrolls normally again at the first and last slides.

Svelte

<Slider direction="vertical" class="h-80" mousewheel loop={false}> ... </Slider>

In a right-to-left page (dir="rtl"), the slider moves the other way: the next slide comes from the left, the controls swap sides, dragging follows the finger, and the Left arrow key goes to the next slide. The direction is read when the slider loads.

Your classes are merged with the default classes, so a class you set replaces the default one it conflicts with.

The Slider follows the WAI-ARIA carousel pattern, so it works with the keyboard and with screen readers.

Slider

Slide