Carousel

Displays a carousel with previous and next buttons. Based on Embla Carousel.

Embla Carousel Options Embla Carousel Plugins

Import

import { Carousel } from "@aeonkit/react";

Usage

Simple

A simple carousel with images and some spacing between them.

Preview
Code

<Carousel>
  <Carousel.Container className="max-h-96 w-full">
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1625278152200-ae2d1fc87c5f?q=80&w=1767&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Austin"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1622007151631-25aa98ab394b?q=80&w=1782&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Houston"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1621904878414-d4ca4756bd7e?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Dallas"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
  </Carousel.Container>
  <div className="flex flex-row items-center mt-8">
    <div className="flex flex-1 justify-start gap-2">
      <Carousel.Previous>
        <LuChevronLeft className="h-6 w-6" />
      </Carousel.Previous>
      <Carousel.Next>
        <LuChevronRight className="h-6 w-6" />
      </Carousel.Next>
    </div>
  </div>
</Carousel>

Vertical

You can change the orientation of the carousel by using the axis option.

Preview
Code

<Carousel options={{ axis: "y" }}>
  <Carousel.Container className="h-72 rounded-md">
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1625278152200-ae2d1fc87c5f?q=80&w=1767&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Austin"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1622007151631-25aa98ab394b?q=80&w=1782&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Houston"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1621904878414-d4ca4756bd7e?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Dallas"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
  </Carousel.Container>
  <div className="flex flex-row items-center mt-8">
    <div className="flex flex-1 justify-start gap-2">
      <Carousel.Previous>
        <LuChevronLeft className="h-6 w-6" />
      </Carousel.Previous>
      <Carousel.Next>
        <LuChevronRight className="h-6 w-6" />
      </Carousel.Next>
    </div>
    <div className="flex flex-1 justify-end">
      <Carousel.Dots />
    </div>
  </div>
</Carousel>

Autoplay

You can set the carousel to autoplay by using the Autoplay plugin. First, install the embla-carousel-autoplay package.

npm install embla-carousel-autoplay

Then, import the plugin.

import Autoplay from "embla-carousel-autoplay";

Preview
Code

<Carousel plugins={[Autoplay()]}>
  <Carousel.Container className="max-h-96 w-full">
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1625278152200-ae2d1fc87c5f?q=80&w=1767&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Austin"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1622007151631-25aa98ab394b?q=80&w=1782&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Houston"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1621904878414-d4ca4756bd7e?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Dallas"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
  </Carousel.Container>
  <div className="flex flex-row items-center mt-8">
    <div className="flex flex-1 justify-start gap-2">
      <Carousel.Previous>
        <LuChevronLeft className="h-6 w-6" />
      </Carousel.Previous>
      <Carousel.Next>
        <LuChevronRight className="h-6 w-6" />
      </Carousel.Next>
    </div>
    <div className="flex flex-1 justify-end">
      <Carousel.Dots />
    </div>
  </div>
</Carousel>

Fade

You can set the carousel to fade by using the Fade plugin.

npm install embla-carousel-fade

Then, import the plugin.

import Fade from "embla-carousel-fade";

Preview
Code

<Carousel plugins={[Fade()]}>
  <Carousel.Container className="max-h-96 w-full">
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1625278152200-ae2d1fc87c5f?q=80&w=1767&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Austin"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1622007151631-25aa98ab394b?q=80&w=1782&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Houston"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1621904878414-d4ca4756bd7e?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Dallas"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
  </Carousel.Container>
  <div className="flex flex-row items-center mt-8">
    <div className="flex flex-1 justify-start gap-2">
      <Carousel.Previous>
        <LuChevronLeft className="h-6 w-6" />
      </Carousel.Previous>
      <Carousel.Next>
        <LuChevronRight className="h-6 w-6" />
      </Carousel.Next>
    </div>
    <div className="flex flex-1 justify-end">
      <Carousel.Dots />
    </div>
  </div>
</Carousel>

You can add navigation arrows to the carousel by using the Carousel.Previous and Carousel.Next components.

Preview
Code

<Carousel>
  <Carousel.Container className="max-h-96 max-w-3xl w-full">
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1625278152200-ae2d1fc87c5f?q=80&w=1767&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Austin"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1622007151631-25aa98ab394b?q=80&w=1782&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Houston"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1621904878414-d4ca4756bd7e?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Dallas"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
  </Carousel.Container>
  <div className="flex flex-row items-center mt-8">
    <div className="flex flex-1 justify-start gap-2">
      <Carousel.Previous>
        <LuChevronLeft className="h-6 w-6" />
      </Carousel.Previous>
      <Carousel.Next>
        <LuChevronRight className="h-6 w-6" />
      </Carousel.Next>
    </div>
  </div>
</Carousel>

You can add navigation dots to the carousel by using the Carousel.Dots component.

Preview
Code

<Carousel options={{ startIndex: 2 }}>
  <Carousel.Container className="max-h-96 w-full">
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1625278152200-ae2d1fc87c5f?q=80&w=1767&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Austin"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1622007151631-25aa98ab394b?q=80&w=1782&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Houston"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1621904878414-d4ca4756bd7e?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Dallas"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
  </Carousel.Container>
  <div className="flex flex-row items-center mt-8">
    <div className="flex flex-1 justify-start gap-2">
      <Carousel.Previous>
        <LuChevronLeft className="h-6 w-6" />
      </Carousel.Previous>
      <Carousel.Next>
        <LuChevronRight className="h-6 w-6" />
      </Carousel.Next>
    </div>
    <div className="flex flex-1 justify-end">
      <Carousel.Dots />
    </div>
  </div>
</Carousel>

Custom Dots

You can customize the navigation dots by using the Carousel.Dots component and passing a render function.

Preview
Code

<Carousel options={{ startIndex: 2 }}>
  <Carousel.Container className="max-h-96 w-full">
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1625278152200-ae2d1fc87c5f?q=80&w=1767&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Austin"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1622007151631-25aa98ab394b?q=80&w=1782&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Houston"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
    <Carousel.Slide>
      <img
        src="https://images.unsplash.com/photo-1621904878414-d4ca4756bd7e?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Dallas"
        className="h-96 object-cover w-full rounded-md"
      />
    </Carousel.Slide>
  </Carousel.Container>
  <div className="flex flex-row items-center mt-8">
    <div className="flex flex-1 justify-center">
      <Carousel.Dots
        render={(selectedIndex, currentIndex) => (
          <LuDisc
            className={cn(
              "text-pink-400 dark:text-pink-300 opacity-50 duration-300 transition-opacity",
              selectedIndex === currentIndex && "opacity-100",
            )}
            size={20}
          />
        )}
      />
    </div>
  </div>
</Carousel>

Multiple Slides

You can display multiple slides at once by setting the slidesToScroll option. You also need to set the flex basis of the slides to a percentage value.

Preview
Code

<Carousel options={{ slidesToScroll: "auto", align: "end" }}>
  <Carousel.Container className="max-w-4xl">
    <Carousel.Slide className="flex-[0_0_50%]">
      <img
        src="https://images.unsplash.com/photo-1625278152200-ae2d1fc87c5f?q=80&w=1767&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Austin"
        className="h-96 object-cover rounded-md w-full"
      />
    </Carousel.Slide>
    <Carousel.Slide className="flex-[0_0_50%]">
      <img
        src="https://images.unsplash.com/photo-1622007151631-25aa98ab394b?q=80&w=1782&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Houston"
        className="h-96 object-cover rounded-md w-full"
      />
    </Carousel.Slide>
    <Carousel.Slide className="flex-[0_0_50%]">
      <img
        src="https://images.unsplash.com/photo-1621904878414-d4ca4756bd7e?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Dallas"
        className="h-96 object-cover rounded-md w-full"
      />
    </Carousel.Slide>
  </Carousel.Container>
  <div className="flex flex-row items-center mt-8">
    <div className="flex flex-1 justify-start gap-2">
      <Carousel.Previous>
        <LuChevronLeft className="h-6 w-6" />
      </Carousel.Previous>
      <Carousel.Next>
        <LuChevronRight className="h-6 w-6" />
      </Carousel.Next>
    </div>
    <div className="flex flex-1 justify-end">
      <Carousel.Dots />
    </div>
  </div>
</Carousel>

Props

options?

EmblaOptionsType

Options for the carousel. See the Embla Carousel documentation link above for more information.

plugins?

EmblaPluginType[]

Plugins for the carousel. See the Embla Carousel documentation link above for more information.

getCarouselApi?

(api: CarouselAPI) => void;

A function that receives the Embla Carousel API instance. Useful for controlling the carousel programmatically.

API Interface: CarouselProps

API Interface: CarouselContainerProps

API Interface: CarouselNextProps

API Interface: CarouselPreviousProps

API Interface: CarouselSlideProps

as?

IconType

The element type to render the dots as.

render?

(slideIndex: number, currentIndex: number) => ReactNode

A function that returns a ReactNode for each dot. The selected index and current slide index is passed as arguments.

API Interface: CarouselDotsProps