Skip to content
UI

Carousel

A slideshow component that cycles through elements.

 
<script setup lang="ts">
import { Carousel } from '@destyler-ui/vue'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)
</script>

<template>
  <Carousel.Root>
    <Carousel.Control>
      <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
      <Carousel.NextTrigger>Next</Carousel.NextTrigger>
      <Carousel.AutoplayTrigger>
        <Carousel.Context v-slot="context">
          {{ context.isPlaying ? 'Pause' : 'Play' }}
        </Carousel.Context>
      </Carousel.AutoplayTrigger>
    </Carousel.Control>
    <Carousel.IndicatorGroup>
      <Carousel.Indicator v-for="(_, idx) in images" :key="idx" :index="idx" />
    </Carousel.IndicatorGroup>
    <Carousel.ItemGroup>
      <Carousel.Item v-for="(image, idx) in images" :key="idx" :index="idx">
        <img :src="image" alt="" :style="{ height: '300px', width: '100%', objectFit: 'cover' }" />
      </Carousel.Item>
    </Carousel.ItemGroup>
  </Carousel.Root>
</template>

import { Carousel } from '@destyler-ui/react'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)

export function Basic() {
  return (
    <Carousel.Root>
      <Carousel.Control>
        <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
        <Carousel.AutoplayTrigger>
          <Carousel.Context>
            {context => (context.isPlaying ? 'Pause' : 'Play')}
          </Carousel.Context>
        </Carousel.AutoplayTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup>
        {images.map((_, idx) => (
          <Carousel.Indicator key={idx} index={idx} />
        ))}
      </Carousel.IndicatorGroup>
      <Carousel.ItemGroup>
        {images.map((image, idx) => (
          <Carousel.Item key={idx} index={idx}>
            <img
              src={image}
              alt=""
              style={{ height: '300px', width: '100%', objectFit: 'cover' }}
            />
          </Carousel.Item>
        ))}
      </Carousel.ItemGroup>
    </Carousel.Root>
  )
}

import { Carousel } from '@destyler-ui/solid/carousel'
import { Index } from 'solid-js'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)

export function Basic() {
  return (
    <Carousel.Root>
      <Carousel.Control>
        <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup>
        <Index each={images}>{(_, index) => <Carousel.Indicator index={index} />}</Index>
      </Carousel.IndicatorGroup>
      <Carousel.ItemGroup>
        <Index each={images}>
          {(image, index) => (
            <Carousel.Item index={index}>
              <img src={image()} alt={`Slide ${index}`} />
            </Carousel.Item>
          )}
        </Index>
      </Carousel.ItemGroup>
    </Carousel.Root>
  )
}

<script lang="ts">
  import { Carousel } from '@destyler-ui/svelte'
  const images = Array.from({ length: 5 }, (_, index) => `https://picsum.photos/seed/${index + 1}/500/300`)
</script>

<Carousel.Root>
  <Carousel.Control>
    <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
    <Carousel.NextTrigger>Next</Carousel.NextTrigger>
    <Carousel.AutoplayTrigger>
      <Carousel.Context>{#snippet render(api)}{api().isPlaying ? 'Pause' : 'Play'}{/snippet}</Carousel.Context>
    </Carousel.AutoplayTrigger>
  </Carousel.Control>
  <Carousel.IndicatorGroup>
    {#each images as _, index}<Carousel.Indicator {index} />{/each}
  </Carousel.IndicatorGroup>
  <Carousel.ItemGroup>
    {#each images as image, index}<Carousel.Item {index}><img src={image} alt="" style="height: 300px; width: 100%; object-fit: cover;" /></Carousel.Item>{/each}
  </Carousel.ItemGroup>
</Carousel.Root>

Anatomy

Section titled “Anatomy”
<script setup lang="ts">
import { Carousel } from '@destyler-ui/vue'
</script>


<template>
  <Carousel.Root>
    <Carousel.Control>
      <Carousel.PrevTrigger />
      <Carousel.NextTrigger />
    </Carousel.Control>
    <Carousel.IndicatorGroup>
      <Carousel.Indicator />
    </Carousel.IndicatorGroup>
    <Carousel.ItemGroup>
      <Carousel.Item />
    </Carousel.ItemGroup>
  </Carousel.Root>
</template>
import { Carousel } from '@destyler-ui/react'


export default function Basic() {
  return (
    <Carousel.Root>
      <Carousel.Control>
        <Carousel.PrevTrigger />
        <Carousel.NextTrigger />
      </Carousel.Control>
      <Carousel.IndicatorGroup>
        <Carousel.Indicator />
      </Carousel.IndicatorGroup>
      <Carousel.ItemGroup>
        <Carousel.Item />
      </Carousel.ItemGroup>
    </Carousel.Root>
  )
}
import { Carousel } from '@destyler-ui/solid'
import { Index } from 'solid-js'


const images = Array.from(
  { length: 3 },
  (_, index) => `https://picsum.photos/seed/${index + 1}/500/300`,
)


export default function Basic() {
  return (
    <Carousel.Root>
      <Carousel.Control>
        <Carousel.PrevTrigger />
        <Carousel.NextTrigger />
      </Carousel.Control>
      <Carousel.IndicatorGroup>
        <Index each={images}>
          {(_, index) => <Carousel.Indicator index={index} />}
        </Index>
      </Carousel.IndicatorGroup>
      <Carousel.ItemGroup>
        <Index each={images}>
          {(image, index) => (
            <Carousel.Item index={index}>
              <img src={image()} alt={`Slide ${index + 1}`} />
            </Carousel.Item>
          )}
        </Index>
      </Carousel.ItemGroup>
    </Carousel.Root>
  )
}
<script lang="ts">
  import { Carousel } from '@destyler-ui/svelte'
  const images = Array.from({ length: 5 }, (_, index) => `https://picsum.photos/seed/${index + 1}/500/300`)
</script>


<Carousel.Root>
  <Carousel.Control>
    <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
    <Carousel.NextTrigger>Next</Carousel.NextTrigger>
    <Carousel.AutoplayTrigger>
      <Carousel.Context>{#snippet render(api)}{api().isPlaying ? 'Pause' : 'Play'}{/snippet}</Carousel.Context>
    </Carousel.AutoplayTrigger>
  </Carousel.Control>
  <Carousel.IndicatorGroup>
    {#each images as _, index}<Carousel.Indicator {index} />{/each}
  </Carousel.IndicatorGroup>
  <Carousel.ItemGroup>
    {#each images as image, index}<Carousel.Item {index}><img src={image} alt="" style="height: 300px; width: 100%; object-fit: cover;" /></Carousel.Item>{/each}
  </Carousel.ItemGroup>
</Carousel.Root>

Examples

Section titled “Examples”

Basic

Section titled “Basic”
 
<script setup lang="ts">
import { Carousel } from '@destyler-ui/vue'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)
</script>

<template>
  <Carousel.Root>
    <Carousel.Control>
      <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
      <Carousel.NextTrigger>Next</Carousel.NextTrigger>
      <Carousel.AutoplayTrigger>
        <Carousel.Context v-slot="context">
          {{ context.isPlaying ? 'Pause' : 'Play' }}
        </Carousel.Context>
      </Carousel.AutoplayTrigger>
    </Carousel.Control>
    <Carousel.IndicatorGroup>
      <Carousel.Indicator v-for="(_, idx) in images" :key="idx" :index="idx" />
    </Carousel.IndicatorGroup>
    <Carousel.ItemGroup>
      <Carousel.Item v-for="(image, idx) in images" :key="idx" :index="idx">
        <img :src="image" alt="" :style="{ height: '300px', width: '100%', objectFit: 'cover' }" />
      </Carousel.Item>
    </Carousel.ItemGroup>
  </Carousel.Root>
</template>

import { Carousel } from '@destyler-ui/react'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)

export function Basic() {
  return (
    <Carousel.Root>
      <Carousel.Control>
        <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
        <Carousel.AutoplayTrigger>
          <Carousel.Context>
            {context => (context.isPlaying ? 'Pause' : 'Play')}
          </Carousel.Context>
        </Carousel.AutoplayTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup>
        {images.map((_, idx) => (
          <Carousel.Indicator key={idx} index={idx} />
        ))}
      </Carousel.IndicatorGroup>
      <Carousel.ItemGroup>
        {images.map((image, idx) => (
          <Carousel.Item key={idx} index={idx}>
            <img
              src={image}
              alt=""
              style={{ height: '300px', width: '100%', objectFit: 'cover' }}
            />
          </Carousel.Item>
        ))}
      </Carousel.ItemGroup>
    </Carousel.Root>
  )
}

import { Carousel } from '@destyler-ui/solid/carousel'
import { Index } from 'solid-js'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)

export function Basic() {
  return (
    <Carousel.Root>
      <Carousel.Control>
        <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup>
        <Index each={images}>{(_, index) => <Carousel.Indicator index={index} />}</Index>
      </Carousel.IndicatorGroup>
      <Carousel.ItemGroup>
        <Index each={images}>
          {(image, index) => (
            <Carousel.Item index={index}>
              <img src={image()} alt={`Slide ${index}`} />
            </Carousel.Item>
          )}
        </Index>
      </Carousel.ItemGroup>
    </Carousel.Root>
  )
}

<script lang="ts">
  import { Carousel } from '@destyler-ui/svelte'
  const images = Array.from({ length: 5 }, (_, index) => `https://picsum.photos/seed/${index + 1}/500/300`)
</script>

<Carousel.Root>
  <Carousel.Control>
    <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
    <Carousel.NextTrigger>Next</Carousel.NextTrigger>
    <Carousel.AutoplayTrigger>
      <Carousel.Context>{#snippet render(api)}{api().isPlaying ? 'Pause' : 'Play'}{/snippet}</Carousel.Context>
    </Carousel.AutoplayTrigger>
  </Carousel.Control>
  <Carousel.IndicatorGroup>
    {#each images as _, index}<Carousel.Indicator {index} />{/each}
  </Carousel.IndicatorGroup>
  <Carousel.ItemGroup>
    {#each images as image, index}<Carousel.Item {index}><img src={image} alt="" style="height: 300px; width: 100%; object-fit: cover;" /></Carousel.Item>{/each}
  </Carousel.ItemGroup>
</Carousel.Root>

AutoPlay

Section titled “AutoPlay”

Automatically cycle through items at a set interval.

 
<script setup lang="ts">
import { Carousel } from '@destyler-ui/vue'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)
</script>

<template>
  <Carousel.Root autoplay loop>
    <Carousel.Control>
      <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
      <Carousel.NextTrigger>Next</Carousel.NextTrigger>
      <Carousel.AutoplayTrigger>
        <Carousel.Context v-slot="context">
          {{ context.isPlaying ? 'Pause' : 'Play' }}
        </Carousel.Context>
      </Carousel.AutoplayTrigger>
    </Carousel.Control>
    <Carousel.IndicatorGroup>
      <Carousel.Indicator v-for="(_, idx) in images" :key="idx" :index="idx" />
    </Carousel.IndicatorGroup>
    <Carousel.ItemGroup>
      <Carousel.Item v-for="(image, idx) in images" :key="idx" :index="idx">
        <img :src="image" alt="" />
      </Carousel.Item>
    </Carousel.ItemGroup>
  </Carousel.Root>
</template>

import { Carousel } from '@destyler-ui/react'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)

export function AutoPlay() {
  return (
    <Carousel.Root autoplay loop>
      <Carousel.Control>
        <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
        <Carousel.AutoplayTrigger>
          <Carousel.Context>
            {context => (context.isPlaying ? 'Pause' : 'Play')}
          </Carousel.Context>
        </Carousel.AutoplayTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup>
        {images.map((_, idx) => (
          <Carousel.Indicator key={idx} index={idx} />
        ))}
      </Carousel.IndicatorGroup>
      <Carousel.ItemGroup>
        {images.map((image, idx) => (
          <Carousel.Item key={idx} index={idx}>
            <img
              src={image}
              alt=""
              style={{ height: '300px', width: '100%', objectFit: 'cover' }}
            />
          </Carousel.Item>
        ))}
      </Carousel.ItemGroup>
    </Carousel.Root>
  )
}

import { Carousel } from '@destyler-ui/solid/carousel'
import { Index } from 'solid-js'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)

export function AutoPlay() {
  return (
    <Carousel.Root autoplay loop>
      <Carousel.Control>
        <Carousel.AutoplayTrigger>
          <Carousel.Context>
            {carousel => (carousel().isPlaying ? 'Pause' : 'Play')}
          </Carousel.Context>
        </Carousel.AutoplayTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup>
        <Index each={images}>{(_, index) => <Carousel.Indicator index={index} />}</Index>
      </Carousel.IndicatorGroup>
      <Carousel.ItemGroup>
        <Index each={images}>
          {(image, index) => (
            <Carousel.Item index={index}>
              <img src={image()} alt={`Slide ${index}`} />
            </Carousel.Item>
          )}
        </Index>
      </Carousel.ItemGroup>
    </Carousel.Root>
  )
}

<script lang="ts">
  import { Carousel } from '@destyler-ui/svelte'
  const images = Array.from({ length: 5 }, (_, index) => `https://picsum.photos/seed/${index + 1}/500/300`)
</script>

<Carousel.Root autoplay loop>
  <Carousel.Control>
    <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger><Carousel.NextTrigger>Next</Carousel.NextTrigger>
    <Carousel.AutoplayTrigger><Carousel.Context>{#snippet render(api)}{api().isPlaying ? 'Pause' : 'Play'}{/snippet}</Carousel.Context></Carousel.AutoplayTrigger>
  </Carousel.Control>
  <Carousel.IndicatorGroup>{#each images as _, index}<Carousel.Indicator {index} />{/each}</Carousel.IndicatorGroup>
  <Carousel.ItemGroup>{#each images as image, index}<Carousel.Item {index}><img src={image} alt="" style="height: 300px; width: 100%; object-fit: cover;" /></Carousel.Item>{/each}</Carousel.ItemGroup>
</Carousel.Root>

Controlled

Section titled “Controlled”

Control the active slide programmatically.

 
<script setup lang="ts">
import { Carousel } from '@destyler-ui/vue'
import { ref } from 'vue'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)
const page = ref(0)
</script>

<template>
  <main>
    <output>
      {{ page }}
    </output>
    <Carousel.Root v-model:page="page">
      <Carousel.Control>
        <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup>
        <Carousel.Indicator v-for="(_, idx) in images" :key="idx" :index="idx" />
      </Carousel.IndicatorGroup>
      <Carousel.ItemGroup>
        <Carousel.Item v-for="(image, idx) in images" :key="idx" :index="idx">
          <img :src="image" alt="" />
        </Carousel.Item>
      </Carousel.ItemGroup>
    </Carousel.Root>
  </main>

</template>

import { useState } from 'react'
import { Carousel } from '@destyler-ui/react'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)

export function Controlled() {
  const [page, setPage] = useState(0)

  return (
    <>
      <div>{page}</div>
      <Carousel.Root page={page} onPageChange={({ page }) => setPage(page)}>
        <Carousel.Control>
          <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
          <Carousel.NextTrigger>Next</Carousel.NextTrigger>
        </Carousel.Control>
        <Carousel.IndicatorGroup>
          {images.map((_, idx) => (
            <Carousel.Indicator key={idx} index={idx} />
          ))}
        </Carousel.IndicatorGroup>
        <Carousel.ItemGroup>
          {images.map((image, idx) => (
            <Carousel.Item key={idx} index={idx}>
              <img
                src={image}
                alt=""
                style={{ height: '300px', width: '100%', objectFit: 'cover' }}
              />
            </Carousel.Item>
          ))}
        </Carousel.ItemGroup>
      </Carousel.Root>
    </>
  )
}

import { Carousel } from '@destyler-ui/solid/carousel'
import { createSignal, Index } from 'solid-js'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)

export function Controlled() {
  const [page, setPage] = createSignal(0)

  return (
    <>
      <Carousel.Root page={page()} onPageChange={details => setPage(details.page)}>
        <Carousel.Control>
          <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
          <Carousel.NextTrigger>Next</Carousel.NextTrigger>
        </Carousel.Control>
        <Carousel.IndicatorGroup>
          <Index each={images}>{(_, index) => <Carousel.Indicator index={index} />}</Index>
        </Carousel.IndicatorGroup>
        <Carousel.ItemGroup>
          <Index each={images}>
            {(image, index) => (
              <Carousel.Item index={index}>
                <img src={image()} alt={`Slide ${index}`} />
              </Carousel.Item>
            )}
          </Index>
        </Carousel.ItemGroup>
      </Carousel.Root>
    </>
  )
}

<script lang="ts">
  import { Carousel } from '@destyler-ui/svelte'
  const images = Array.from({ length: 5 }, (_, index) => `https://picsum.photos/seed/${index + 1}/500/300`)
  let page = $state(0)
</script>

<main>
  <output>{page}</output>
  <Carousel.Root bind:page>
    <Carousel.Control><Carousel.PrevTrigger>Previous</Carousel.PrevTrigger><Carousel.NextTrigger>Next</Carousel.NextTrigger></Carousel.Control>
    <Carousel.IndicatorGroup>{#each images as _, index}<Carousel.Indicator {index} />{/each}</Carousel.IndicatorGroup>
    <Carousel.ItemGroup>{#each images as image, index}<Carousel.Item {index}><img src={image} alt="" style="height: 300px; width: 100%; object-fit: cover;" /></Carousel.Item>{/each}</Carousel.ItemGroup>
  </Carousel.Root>
</main>

Root Provider

Section titled “Root Provider”
 
<script setup lang="ts">
import { Carousel, useCarousel } from '@destyler-ui/vue'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)

const carousel = useCarousel()
</script>

<template>
  <main>
    <button @click="carousel.scrollToIndex(2)">Scroll to #3</button>
    <Carousel.RootProvider :value="carousel">
      <Carousel.Control>
        <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
        <Carousel.NextTrigger>Next</Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup>
        <Carousel.Indicator v-for="(_, idx) in images" :key="idx" :index="idx" />
      </Carousel.IndicatorGroup>
      <Carousel.ItemGroup>
        <Carousel.Item v-for="(image, idx) in images" :key="idx" :index="idx">
          <img :src="image" alt="" />
        </Carousel.Item>
      </Carousel.ItemGroup>
    </Carousel.RootProvider>
  </main>
</template>

import { Carousel, useCarousel } from '@destyler-ui/react'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)

export function RootProvider() {
  const carousel = useCarousel()

  return (
    <>
      <button onClick={() => carousel.scrollToIndex(2)}>Scroll to #3</button>
      <Carousel.RootProvider value={carousel}>
        <Carousel.Control>
          <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
          <Carousel.NextTrigger>Next</Carousel.NextTrigger>
        </Carousel.Control>
        <Carousel.IndicatorGroup>
          {images.map((_, idx) => (
            <Carousel.Indicator key={idx} index={idx} />
          ))}
        </Carousel.IndicatorGroup>
        <Carousel.ItemGroup>
          {images.map((image, idx) => (
            <Carousel.Item key={idx} index={idx}>
              <img
                src={image}
                alt=""
                style={{ height: '300px', width: '100%', objectFit: 'cover' }}
              />
            </Carousel.Item>
          ))}
        </Carousel.ItemGroup>
      </Carousel.RootProvider>
    </>
  )
}

import { Carousel, useCarousel } from '@destyler-ui/solid/carousel'
import { Index } from 'solid-js'

const images = Array.from({ length: 5 }, (_, i) => `https://picsum.photos/seed/${i + 1}/500/300`)

export function RootProvider() {
  const carousel = useCarousel()
  return (
    <>
      <button onClick={() => carousel().scrollToIndex(2)}>Scroll to #3</button>
      <Carousel.RootProvider value={carousel}>
        <Carousel.Control>
          <Carousel.PrevTrigger>Previous</Carousel.PrevTrigger>
          <Carousel.NextTrigger>Next</Carousel.NextTrigger>
        </Carousel.Control>
        <Carousel.IndicatorGroup>
          <Index each={images}>{(_, index) => <Carousel.Indicator index={index} />}</Index>
        </Carousel.IndicatorGroup>
        <Carousel.ItemGroup>
          <Index each={images}>
            {(image, index) => (
              <Carousel.Item index={index}>
                <img src={image()} alt={`Slide ${index}`} />
              </Carousel.Item>
            )}
          </Index>
        </Carousel.ItemGroup>
      </Carousel.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Carousel, useCarousel } from '@destyler-ui/svelte'
  const images = Array.from({ length: 5 }, (_, index) => `https://picsum.photos/seed/${index + 1}/500/300`)
  const id = $props.id()
  const carousel = useCarousel({ id })
</script>

<main>
  <button type="button" onclick={() => carousel().scrollToIndex(2)}>Scroll to #3</button>
  <Carousel.RootProvider value={carousel}>
    <Carousel.Control><Carousel.PrevTrigger>Previous</Carousel.PrevTrigger><Carousel.NextTrigger>Next</Carousel.NextTrigger></Carousel.Control>
    <Carousel.IndicatorGroup>{#each images as _, index}<Carousel.Indicator {index} />{/each}</Carousel.IndicatorGroup>
    <Carousel.ItemGroup>{#each images as image, index}<Carousel.Item {index}><img src={image} alt="" style="height: 300px; width: 100%; object-fit: cover;" /></Carousel.Item>{/each}</Carousel.ItemGroup>
  </Carousel.RootProvider>
</main>

API Reference

Section titled “API Reference”

Root

PropDefaultType
allowMouseDragfalsefalse | true

Whether to allow scrolling via dragging with mouse

asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

autoplayfalsefalse | true | { delay: number; }

Whether to scroll automatically. The default delay is 4000ms.

defaultPage—number

The initial page of the carousel when it is first rendered. Use this when you do not need to control the state of the carousel.

id—string

The unique identifier of the machine.

ids—Partial<{ root: string; item: (index: number) => string; itemGroup: string; nextTrigger: string; prevTrigger: string; indicatorGroup: string; indicator: (index: number) => string; }>

The ids of the elements in the carousel. Useful for composition.

inViewThreshold0.6number | number[]

The threshold for determining if an item is in view.

loopfalsefalse | true

Whether the carousel should loop around.

orientation"horizontal""horizontal" | "vertical"

The orientation of the element.

padding—string

Defines the extra space added around the scrollable area, enabling nearby items to remain partially in view.

page—number

The index of the active page.

slideCount—number

The total number of slides. Useful for SSR to render the initial ating the snap points.

slidesPerMove"auto"number | "auto"

The number of slides to scroll at a time. When set to `auto`, the number of slides to scroll is determined by the `slidesPerPage` property.

slidesPerPage1number

The number of slides to show at a time.

snapType"mandatory""proximity" | "mandatory"

The snap type of the item.

spacing"0px"string

The amount of space between items.

translations—carousel.IntlTranslations

The localized messages to use.

EmitEvent
autoplayStatusChange[details: AutoplayStatusDetails]

Function called when the autoplay status changes.

dragStatusChange[details: DragStatusDetails]

Function called when the drag status changes.

pageChange[details: PageChangeDetails]

Function called when the page changes.

update:page[page: number]

AutoplayTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

Control

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

PropDefaultType
index*—number

The index of the indicator.

asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

readOnlyfalsefalse | true

Whether the indicator is read only.

IndicatorGroup

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Item

PropDefaultType
index*—number

The index of the item.

asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

snapAlign"start""start" | "end" | "center"

The snap alignment of the item.

ItemGroup

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

NextTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

PrevTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—MachineApi<PropTypes>
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
allowMouseDragfalsefalse | true

Whether to allow scrolling via dragging with mouse

asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

autoplayfalsefalse | true | { delay: number; }

Whether to scroll automatically. The default delay is 4000ms.

defaultPage—number

The initial page of the carousel when it is first rendered. Use this when you do not need to control the state of the carousel.

ids—Partial<{ root: string; item: (index: number) => string; itemGroup: string; nextTrigger: string; prevTrigger: string; indicatorGroup: string; indicator: (index: number) => string; }>

The ids of the elements in the carousel. Useful for composition.

inViewThreshold0.6number | number[]

The threshold for determining if an item is in view.

loopfalsefalse | true

Whether the carousel should loop around.

onAutoplayStatusChange—(details: carousel.AutoplayStatusDetails) => void

Function called when the autoplay status changes.

onDragStatusChange—(details: carousel.DragStatusDetails) => void

Function called when the drag status changes.

onPageChange—(details: carousel.PageChangeDetails) => void

Function called when the page changes.

orientation"horizontal""horizontal" | "vertical"

The orientation of the element.

padding—string

Defines the extra space added around the scrollable area, enabling nearby items to remain partially in view.

page—number

The index of the active page.

slideCount—number

The total number of slides. Useful for SSR to render the initial ating the snap points.

slidesPerMove"auto"number | "auto"

The number of slides to scroll at a time. When set to `auto`, the number of slides to scroll is determined by the `slidesPerPage` property.

slidesPerPage1number

The number of slides to show at a time.

snapType"mandatory""proximity" | "mandatory"

The snap type of the item.

spacing"0px"string

The amount of space between items.

translations—carousel.IntlTranslations

The localized messages to use.

AutoplayTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Context

PropDefaultType
children*—(context: UseCarouselContext) => ReactNode

Control

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

PropDefaultType
index*—number

The index of the indicator.

asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

readOnlyfalsefalse | true

Whether the indicator is read only.

IndicatorGroup

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Item

PropDefaultType
index*—number

The index of the item.

asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

snapAlign"start""center" | "start" | "end"

The snap alignment of the item.

ItemGroup

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

NextTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

PrevTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—UseCarouselReturn
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
allowMouseDragfalsefalse | true

Whether to allow scrolling via dragging with mouse

asChild—(props: (userProps?: solid_js232.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

autoplayfalsefalse | true | { delay: number; }

Whether to scroll automatically. The default delay is 4000ms.

defaultPage—number

The initial page of the carousel when it is first rendered. Use this when you do not need to control the state of the carousel.

ids—Partial<{ root: string; item: (index: number) => string; itemGroup: string; nextTrigger: string; prevTrigger: string; indicatorGroup: string; indicator: (index: number) => string; }>

The ids of the elements in the carousel. Useful for composition.

inViewThreshold0.6number | number[]

The threshold for determining if an item is in view.

loopfalsefalse | true

Whether the carousel should loop around.

onAutoplayStatusChange—(details: AutoplayStatusDetails) => void

Function called when the autoplay status changes.

onDragStatusChange—(details: DragStatusDetails) => void

Function called when the drag status changes.

onPageChange—(details: PageChangeDetails) => void

Function called when the page changes.

orientation"horizontal""horizontal" | "vertical"

The orientation of the element.

padding—string

Defines the extra space added around the scrollable area, enabling nearby items to remain partially in view.

page—number

The index of the active page.

slideCount—number

The total number of slides. Useful for SSR to render the initial ating the snap points.

slidesPerMove"auto"number | "auto"

The number of slides to scroll at a time. When set to `auto`, the number of slides to scroll is determined by the `slidesPerPage` property.

slidesPerPage1number

The number of slides to show at a time.

snapType"mandatory""proximity" | "mandatory"

The snap type of the item.

spacing"0px"string

The amount of space between items.

translations—carousel.IntlTranslations

The localized messages to use.

AutoplayTrigger

PropDefaultType
asChild—(props: (userProps?: solid_js232.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Context

PropDefaultType
children*—(context: UseCarouselContext) => Element

Control

PropDefaultType
asChild—(props: (userProps?: solid_js232.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

PropDefaultType
index*—number

The index of the indicator.

asChild—(props: (userProps?: solid_js232.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

readOnlyfalsefalse | true

Whether the indicator is read only.

IndicatorGroup

PropDefaultType
asChild—(props: (userProps?: solid_js232.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Item

PropDefaultType
index*—number

The index of the item.

asChild—(props: (userProps?: solid_js232.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

snapAlign"start""start" | "end" | "center"

The snap alignment of the item.

ItemGroup

PropDefaultType
asChild—(props: (userProps?: solid_js232.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

NextTrigger

PropDefaultType
asChild—(props: (userProps?: solid_js232.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

PrevTrigger

PropDefaultType
asChild—(props: (userProps?: solid_js232.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—UseCarouselReturn
asChild—(props: (userProps?: solid_js232.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
allowMouseDragfalsefalse | true

Whether to allow scrolling via dragging with mouse

asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
autoplayfalsefalse | true | { delay: number; }

Whether to scroll automatically. The default delay is 4000ms.

children—Snippet<[]> | undefined
defaultPage—number
id—string
ids—Partial<{ root: string; item: (index: number) => string; itemGroup: string; nextTrigger: string; prevTrigger: string; indicatorGroup: string; indicator: (index: number) => string; }>

The ids of the elements in the carousel. Useful for composition.

inViewThreshold0.6number | number[]

The threshold for determining if an item is in view.

loopfalsefalse | true

Whether the carousel should loop around.

onAutoplayStatusChange—(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").CarouselAutoplayStatusDetails) => void

Function called when the autoplay status changes.

onDragStatusChange—(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").CarouselDragStatusDetails) => void

Function called when the drag status changes.

onPageChange—(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").CarouselPageChangeDetails) => void

Function called when the page changes.

orientation"horizontal""horizontal" | "vertical"

The orientation of the element.

padding—string

Defines the extra space added around the scrollable area, enabling nearby items to remain partially in view.

page—number

The index of the active page.

slideCount—number

The total number of slides. Useful for SSR to render the initial ating the snap points.

slidesPerMove"auto"number | "auto"

The number of slides to scroll at a time. When set to `auto`, the number of slides to scroll is determined by the `slidesPerPage` property.

slidesPerPage1number

The number of slides to show at a time.

snapType"mandatory""proximity" | "mandatory"

The snap type of the item.

spacing"0px"string

The amount of space between items.

translations—IntlTranslations | undefined

The localized messages to use.

AutoplayTrigger

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children—Snippet<[]> | undefined

Context

PropDefaultType
render*—Snippet<[UseCarouselContext]>

Control

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined

Indicator

PropDefaultType
index*—number

The index of the indicator.

asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children—Snippet<[]> | undefined
readOnlyfalsefalse | true

Whether the indicator is read only.

IndicatorGroup

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined

Item

PropDefaultType
index*—number

The index of the item.

asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined
snapAlign"start""start" | "end" | "center"

The snap alignment of the item.

ItemGroup

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined

NextTrigger

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children—Snippet<[]> | undefined

PrevTrigger

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children—Snippet<[]> | undefined

RootProvider

PropDefaultType
value*—UseCarouselReturn
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined