Ark UI

Basic Usage

To get started, import the necessary components from the package:

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

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

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

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>
        {images.map((_, index) => (
          <CarouselIndicator key={index} index={index}>
            {index + 1}
          </CarouselIndicator>
        ))}
      </CarouselIndicatorGroup>
      <CarouselViewport>
        <CarouselSlideGroup>
          {images.map((image, index) => (
            <CarouselSlide key={index} index={index}>
              <img
                src={image}
                alt=""
                style={{ height: '300px', width: '100%', objectFit: 'cover' }}
              />
            </CarouselSlide>
          ))}
        </CarouselSlideGroup>
      </CarouselViewport>
    </Carousel>
  )
}

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

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}
                  alt=""
                  style={{ height: '300px', width: '100%', 'object-fit': 'cover' }}
                />
              </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>
  )
}

Conclusion

The Carousel component offers a flexible and powerful solution for displaying dynamic content in your applications. With its comprehensive set of features and customizability, it can accommodate a wide range of use cases and designs.