Carousel

Component preview

import * as UI from "@iyk/ui"

export default () => (
  <UI.CarouselV2.Root>
    <UI.CarouselV2.Slides
      slides={Array.from({ length: 3 }, (_, i) => ({ id: i + 1 }))}
      classNames={{
        viewport: "size-60",
      }}
    >
      {(slide) => (
        <UI.CarouselV2.Slide>
          <div className="flex size-full items-center justify-center bg-tomato-9 text-tomato-1">
            <span>Slide {slide.id}</span>
          </div>
        </UI.CarouselV2.Slide>
      )}
    </UI.CarouselV2.Slides>
  </UI.CarouselV2.Root>
)

You may need to style the Slides and Indicators components

The viewport and container are two properties used to style the <Slides /> and <Indicators /> components.

viewport

The container for all the slides/indicators. For example, if you decide that the available height for the slides/indicators is 400px, the viewport container should have a height of 400px.

container

The container for each slide/indicator. The fact that the viewport is 400px in size does not mean that each slide/indicator is 400px in size. The container element determines the size of each slide/indicator, so if you want it to be 400px high, the container element should fill 100% of the height of the viewport.

Slide spacing

The slideSpacing prop is used to set the spacing between the slides.

The following example shows how to set the slide spacing to 10px instead of the default 40px.

import * as UI from "@iyk/ui"

export default () => (
  <UI.CarouselV2.Root slideSpacing={10}>
    <UI.CarouselV2.Slides
      classNames={{
        viewport: "size-60",
      }}
      slides={Array.from({ length: 3 }, (_, i) => ({ id: i + 1 }))}
    >
      {(slide) => (
        <UI.CarouselV2.Slide>
          <div className="flex size-full items-center justify-center bg-tomato-9 text-tomato-1">
            <span>Slide {slide.id}</span>
          </div>
        </UI.CarouselV2.Slide>
      )}
    </UI.CarouselV2.Slides>
  </UI.CarouselV2.Root>
)

Custom size

The slideSize prop is used to set the size of the slides.

The following example shows how to set the slide size to 50% instead of the default 100%.

import * as UI from "@iyk/ui"

export default () => (
  <UI.CarouselV2.Root slideSize="50%">
    <UI.CarouselV2.Slides
      classNames={{
        viewport: "size-60",
      }}
      slides={Array.from({ length: 3 }, (_, i) => ({ id: i + 1 }))}
    >
      {(slide) => (
        <UI.CarouselV2.Slide>
          <div className="flex size-full items-center justify-center bg-tomato-9 text-tomato-1">
            <span>Slide {slide.id}</span>
          </div>
        </UI.CarouselV2.Slide>
      )}
    </UI.CarouselV2.Slides>
  </UI.CarouselV2.Root>
)

As you can see, each slide is now 50% of the width of the viewport.

Options

The options prop is used to set the options for the carousel. If you want to know more about the available options, you can check the Embla Carousel documentation.

The following example shows how to set breakpoints to change the alignment of the slides.

import * as UI from "@iyk/ui"

export default () => (
  <UI.CarouselV2.Root
    options={{
      breakpoints: {
        "(min-width: 768px)": {
          align: "center",
        },
        "(min-width: 1024px)": {
          align: "start",
        },
      },
    }}
    slideSize="50%"
  >
    <UI.CarouselV2.Slides
      classNames={{
        viewport: "size-60",
      }}
      slides={Array.from({ length: 3 }, (_, i) => ({ id: i + 1 }))}
    >
      {(slide) => (
        <UI.CarouselV2.Slide>
          <div className="flex size-full items-center justify-center bg-tomato-9 text-tomato-1">
            <span>Slide {slide.id}</span>
          </div>
        </UI.CarouselV2.Slide>
      )}
    </UI.CarouselV2.Slides>
  </UI.CarouselV2.Root>
)

Controlled

You can control the carousel by using the onSlideChange and onSlideClick props to get the current slide index and the index of the clicked slide.

Also, you can use the useCarousel hook to get the carousel methods and properties and create your custom components.

import * as UI from "@iyk/ui"

export default () => {
  return (
    <UI.CarouselV2.Root
      onSlideChange={(index) => console.log(`Slide ${index + 1} is now active`)}
      onSlideClick={(index) => console.log(`Slide ${index + 1} was clicked`)}
    >
      <UI.CarouselV2.Slides
        classNames={{
          viewport: "size-60",
        }}
        slides={Array.from({ length: 3 }, (_, i) => ({ id: i + 1 }))}
      >
        {(slide) => (
          <UI.CarouselV2.Slide>
            <div className="flex size-full items-center justify-center bg-tomato-9 text-tomato-1">
              <span>Slide {slide.id}</span>
            </div>
          </UI.CarouselV2.Slide>
        )}
      </UI.CarouselV2.Slides>
    </UI.CarouselV2.Root>
  )
}

Indicators

The Indicators component is used to display the indicators of the carousel and can be customized with the variant prop.

The following example shows how to use the Indicators component with the dots variant.

import * as UI from "@iyk/ui"

export default () => (
  <UI.CarouselV2.Root className="w-60">
    <UI.CarouselV2.Slides slides={Array.from({ length: 40 }, (_, i) => ({ id: i + 1 }))}>
      {(slide) => (
        <UI.CarouselV2.Slide>
          <div className="flex h-60 items-center justify-center bg-tomato-9 text-tomato-1">
            <span>Slide {slide.id}</span>
          </div>
        </UI.CarouselV2.Slide>
      )}
    </UI.CarouselV2.Slides>
    <UI.CarouselV2.Indicators variant="dots" />
  </UI.CarouselV2.Root>
)

The following example shows how to use the Indicators component with the horizontal-lines variant.

import * as UI from "@iyk/ui"

export default () => (
  <UI.CarouselV2.Root className="w-60">
    <UI.CarouselV2.Slides slides={Array.from({ length: 12 }, (_, i) => ({ id: i + 1 }))}>
      {(slide) => (
        <UI.CarouselV2.Slide>
          <div className="flex h-60 items-center justify-center bg-tomato-9 text-tomato-1">
            <span>Slide {slide.id}</span>
          </div>
        </UI.CarouselV2.Slide>
      )}
    </UI.CarouselV2.Slides>
    <UI.CarouselV2.Indicators variant="horizontal-lines" />
  </UI.CarouselV2.Root>
)

The following example shows how to use the Indicators component with the vertical-lines variant.

import * as UI from "@iyk/ui"

export default () => (
  <UI.CarouselV2.Root className="w-60">
    <UI.CarouselV2.Slides slides={Array.from({ length: 12 }, (_, i) => ({ id: i + 1 }))}>
      {(slide) => (
        <UI.CarouselV2.Slide>
          <div className="flex h-60 items-center justify-center bg-tomato-9 text-tomato-1">
            <span>Slide {slide.id}</span>
          </div>
        </UI.CarouselV2.Slide>
      )}
    </UI.CarouselV2.Slides>
    <UI.CarouselV2.Indicators variant="vertical-lines" />
  </UI.CarouselV2.Root>
)

If you need to customize the indicator spacing, you can use the indicatorSpacing prop.

Arrows

You can use the LeftArrow and RightArrow components to display the arrows of the carousel.

The following example shows how to use the LeftArrow and RightArrow components.

import * as UI from "@iyk/ui"

export default () => (
  <UI.CarouselV2.Root>
    <UI.CarouselV2.Slides
      classNames={{
        viewport: "size-60",
      }}
      slides={Array.from({ length: 3 }, (_, i) => ({ id: i + 1 }))}
    >
      {(slide) => (
        <UI.CarouselV2.Slide>
          <div className="flex size-full items-center justify-center bg-tomato-9 text-tomato-1">
            <span>Slide {slide.id}</span>
          </div>
        </UI.CarouselV2.Slide>
      )}
    </UI.CarouselV2.Slides>
    <div className="flex items-center justify-center gap-2">
      <UI.CarouselV2.LeftArrow kind="shaded" size="sm" />
      <UI.CarouselV2.Counter />
      <UI.CarouselV2.RightArrow kind="shaded" size="sm" />
    </div>
  </UI.CarouselV2.Root>
)

Direction

You can change the orientation of the carousel using the options.axis property.

The most important thing for vertical orientation to work is to set a fixed height for the main container so that the carousel knows where to start and end the scroll.

The following example shows how to set the direction of the carousel to vertical.

import * as UI from "@iyk/ui"

export default () => (
  <UI.CarouselV2.Root className="size-60" options={{ axis: "y" }}>
    <UI.CarouselV2.Slides slides={Array.from({ length: 40 }, (_, i) => ({ id: i + 1 }))}>
      {(slide) => (
        <UI.CarouselV2.Slide>
          <div className="flex h-full items-center justify-center bg-tomato-9 text-tomato-1">
            <span>Slide {slide.id}</span>
          </div>
        </UI.CarouselV2.Slide>
      )}
    </UI.CarouselV2.Slides>
  </UI.CarouselV2.Root>
)

Auto play

You can enable the auto play of the carousel using the options.autoPlay property. If you want to know more about the available options, you can check the Embla Carousel documentation.

import * as UI from "@iyk/ui"

export default () => (
  <UI.CarouselV2.Root
    options={{ loop: true, autoPlay: { active: true, stopOnInteraction: false } }}
  >
    <UI.CarouselV2.Slides
      slides={Array.from({ length: 3 }, (_, i) => ({ id: i + 1 }))}
      classNames={{
        viewport: "size-60",
      }}
    >
      {(slide) => (
        <UI.CarouselV2.Slide>
          <div className="flex size-full items-center justify-center bg-tomato-9 text-tomato-1">
            <span>Slide {slide.id}</span>
          </div>
        </UI.CarouselV2.Slide>
      )}
    </UI.CarouselV2.Slides>
  </UI.CarouselV2.Root>
)

Auto scroll

You can enable the auto scroll of the carousel using the options.autoScroll property. If you want to know more about the available options, you can check the Embla Carousel documentation.

import * as UI from "@iyk/ui"

export default () => (
  <UI.CarouselV2.Root
    options={{ loop: true, autoScroll: { active: true, stopOnInteraction: false } }}
  >
    <UI.CarouselV2.Slides
      slides={Array.from({ length: 3 }, (_, i) => ({ id: i + 1 }))}
      classNames={{
        viewport: "size-60",
      }}
    >
      {(slide) => (
        <UI.CarouselV2.Slide>
          <div className="flex size-full items-center justify-center bg-tomato-9 text-tomato-1">
            <span>Slide {slide.id}</span>
          </div>
        </UI.CarouselV2.Slide>
      )}
    </UI.CarouselV2.Slides>
  </UI.CarouselV2.Root>
)