Ark UI

Basic Usage

Here’s an example of how to use the Carousel component with a set of images:

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

const Basic = () => {
  const images = [
    'https://tinyurl.com/5b6ka8jd',
    'https://tinyurl.com/7rmccdn5',
    'https://tinyurl.com/59jxz9uu',
  ]
  return (
    <Carousel.Root>
      <Carousel.Control>
        <Carousel.PrevSlideTrigger>Previous</Carousel.PrevSlideTrigger>
        <Carousel.NextSlideTrigger>Next</Carousel.NextSlideTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup>
        {images.map((_, index) => (
          <Carousel.Indicator key={index} index={index}>
            {index + 1}
          </Carousel.Indicator>
        ))}
      </Carousel.IndicatorGroup>
      <Carousel.Viewport>
        <Carousel.SlideGroup>
          {images.map((image, index) => (
            <Carousel.Slide key={index} index={index}>
              <img src={image} />
            </Carousel.Slide>
          ))}
        </Carousel.SlideGroup>
      </Carousel.Viewport>
    </Carousel.Root>
  )
}

import {
  Carousel,
  CarouselControl,
  CarouselIndicator,
  CarouselIndicatorGroup,
  CarouselNextSlideTrigger,
  CarouselPrevSlideTrigger,
  CarouselSlide,
  CarouselSlideGroup,
  CarouselViewport,
} from '@ark-ui/solid'
import { For } from 'solid-js'

const Basic = () => {
  const images = [
    'https://tinyurl.com/5b6ka8jd',
    'https://tinyurl.com/7rmccdn5',
    'https://tinyurl.com/59jxz9uu',
    'https://tinyurl.com/6jurv23t',
    'https://tinyurl.com/yp4rfum7',
  ]
  return (
    <Carousel>
      <CarouselControl>
        <CarouselPrevSlideTrigger>Previous</CarouselPrevSlideTrigger>
        <CarouselNextSlideTrigger>Next</CarouselNextSlideTrigger>
      </CarouselControl>
      <CarouselIndicatorGroup>
        <For each={images}>{(_, index) => <CarouselIndicator index={index()} />}</For>
      </CarouselIndicatorGroup>
      <CarouselViewport>
        <CarouselSlideGroup>
          <For each={images}>
            {(image, index) => (
              <CarouselSlide index={index()}>
                <img src={image} />
              </CarouselSlide>
            )}
          </For>
        </CarouselSlideGroup>
      </CarouselViewport>
    </Carousel>
  )
}

<script setup lang="ts">
import {
  Carousel,
  CarouselControl,
  CarouselIndicator,
  CarouselIndicatorGroup,
  CarouselNextSlideTrigger,
  CarouselPrevSlideTrigger,
  CarouselSlide,
  CarouselSlideGroup,
  CarouselViewport,
} from '@ark-ui/vue'

const images = [
  'https://tinyurl.com/5b6ka8jd',
  'https://tinyurl.com/7rmccdn5',
  'https://tinyurl.com/59jxz9uu',
  'https://tinyurl.com/6jurv23t',
  'https://tinyurl.com/yp4rfum7',
]
</script>

<template>
  <Carousel>
    <CarouselControl>
      <CarouselPrevSlideTrigger>Prev</CarouselPrevSlideTrigger>
      <CarouselNextSlideTrigger>Next</CarouselNextSlideTrigger>
    </CarouselControl>
    <CarouselViewport>
      <CarouselSlideGroup>
        <CarouselSlide v-for="(image, idx) in images" :key="idx" :index="idx">
          <img
            :src="image"
            alt=""
            :style="{ height: '300px', width: '100%', objectFit: 'cover' }"
          />
        </CarouselSlide>
      </CarouselSlideGroup>
    </CarouselViewport>
    <CarouselIndicatorGroup>
      <CarouselIndicator v-for="(_, idx) in images" :key="idx" :index="idx">
        {{ idx + 1 }}
      </CarouselIndicator>
    </CarouselIndicatorGroup>
  </Carousel>
</template>

Controlled Carousel

To create a controlled Carousel component, you can manage the state of the carousel using the index prop and update it when the onSlideChange event handler is called:

const ControlledCarousel = () => {
  const [currentIndex, setCurrentIndex] = useState(0)

  const handleSlideChange = (details) => {
    setCurrentIndex(details.index)
  }

  return (
    <Carousel index={currentIndex} onSlideChange={handleSlideChange}>
      {/* ... */}
    </Carousel>
  )
}

Customizing the Carousel

You can customize the Carousel component by setting various props such as align, loop, slidesPerView, and spacing. Here’s an example of a customized Carousel:

const CustomCarousel = () => {
  return (
    <Carousel
      align="center"
      loop={true}
      slidesPerView={2}
      spacing="16px"
      orientation="horizontal"
    >
      {/* ... */}
    </Carousel>
  )
}