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

<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

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

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

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>

Initial Page

Seed the starting page with defaultPage.

<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 :default-page="2" :slide-count="images.length">
    <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 InitialPage() {
  return (
    <Carousel.Root defaultPage={2} slideCount={images.length}>
      <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 InitialPage() {
  return (
    <Carousel.Root defaultPage={2} slideCount={images.length}>
      <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 defaultPage={2} slideCount={images.length}>
  <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>

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

Root

Prop	Default	Type
`allowMouseDrag`	`false`	`false \| 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.
`autoplay`	`false`	`false \| 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.
`inViewThreshold`	`0.6`	`number \| number[]` The threshold for determining if an item is in view.
`loop`	`false`	`false \| 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.
`slidesPerPage`	`1`	`number` 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.

Emit	Event
`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

Prop	Default	Type
`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

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
`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.
`readOnly`	`false`	`false \| true` Whether the indicator is read only.

IndicatorGroup

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`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

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

NextTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

PrevTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`allowMouseDrag`	`false`	`false \| 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.
`autoplay`	`false`	`false \| 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.
`inViewThreshold`	`0.6`	`number \| number[]` The threshold for determining if an item is in view.
`loop`	`false`	`false \| 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 controlled 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.
`slidesPerPage`	`1`	`number` 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

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseCarouselContext) => ReactNode`

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
`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.
`readOnly`	`false`	`false \| true` Whether the indicator is read only.

IndicatorGroup

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`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

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

NextTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

PrevTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseCarouselReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`allowMouseDrag`	`false`	`false \| true` Whether to allow scrolling via dragging with mouse
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`autoplay`	`false`	`false \| 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.
`inViewThreshold`	`0.6`	`number \| number[]` The threshold for determining if an item is in view.
`loop`	`false`	`false \| 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 controlled 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.
`slidesPerPage`	`1`	`number` 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

Prop	Default	Type
`asChild`	—	`(props: (userProps?: 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

Prop	Default	Type
`children*`	—	`(context: UseCarouselContext) => Element`

Control

Prop	Default	Type
`asChild`	—	`(props: (userProps?: 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

Prop	Default	Type
`index*`	—	`number` The index of the indicator.
`asChild`	—	`(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`readOnly`	`false`	`false \| true` Whether the indicator is read only.

IndicatorGroup

Prop	Default	Type
`asChild`	—	`(props: (userProps?: 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

Prop	Default	Type
`index*`	—	`number` The index of the item.
`asChild`	—	`(props: (userProps?: 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

Prop	Default	Type
`asChild`	—	`(props: (userProps?: 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

Prop	Default	Type
`asChild`	—	`(props: (userProps?: 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

Prop	Default	Type
`asChild`	—	`(props: (userProps?: 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

Prop	Default	Type
`value*`	—	`UseCarouselReturn`
`asChild`	—	`(props: (userProps?: 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

Prop	Default	Type
`allowMouseDrag`	`false`	`false \| true` Whether to allow scrolling via dragging with mouse
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`autoplay`	`false`	`false \| true \| { delay: number; }` Whether to scroll automatically. The default delay is 4000ms.
`children`	—	`Snippet<[]> \| undefined`
`defaultPage`	—	`number` The initial active page when it is not controlled. Prefer this over seeding with `page` for uncontrolled usage.
`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.
`inViewThreshold`	`0.6`	`number \| number[]` The threshold for determining if an item is in view.
`loop`	`false`	`false \| true` Whether the carousel should loop around.
`onAutoplayStatusChange`	—	`(details: import("@destyler/carousel").AutoplayStatusDetails) => void` Function called when the autoplay status changes.
`onDragStatusChange`	—	`(details: import("@destyler/carousel").DragStatusDetails) => void` Function called when the drag status changes.
`onPageChange`	—	`(details: import("@destyler/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 controlled 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.
`slidesPerPage`	`1`	`number` 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`	—	`import("@destyler/carousel").IntlTranslations` The localized messages to use.

AutoplayTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`render*`	—	`Snippet<[UseCarouselContext]>`

Control

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Indicator

Prop	Default	Type
`index*`	—	`number` The index of the indicator.
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`
`readOnly`	`false`	`false \| true` Whether the indicator is read only.

IndicatorGroup

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Item

Prop	Default	Type
`index*`	—	`number` The index of the item.
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`snapAlign`	`"start"`	`"start" \| "end" \| "center"` The snap alignment of the item.

ItemGroup

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

NextTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

PrevTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseCarouselReturn`
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`