Carousel | Pol-ui - A beautiful and functional UI library for React and Next.js

Use the responsive carousel component to allow users to slide through multiple items and navigate between them using the control buttons and indicators.

Choose from multiple examples and options to update the intervals, make the carousel static and set custom control button and indicator by configuring React and the utility classes from Tailwind CSS.

To start using the carousel component you first need to import it from Pol-ui:

Importation

import { Carousel } from "pol-ui";

Default carousel

The default carousel component comes with a set of control buttons and indicators to navigate between the items.

Default carousel

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
  Card,
} from "pol-ui";
 
import React from "react";
 
const CarouselComponent = () => {
  return (
    <Carousel>
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="p-1">
              <Card className="flex aspect-video items-center justify-center p-6">
                <span className="text-4xl font-semibold">{index + 1}</span>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
};
export default CarouselComponent;

Loop carousel

A loop carousel is a carousel that will start over when the last item is reached.

Default carousel

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
  Card,
} from "pol-ui";
 
import React from "react";
 
const CarouselComponent = () => {
  return (
    <Carousel options= {loop: true}>
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="p-1">
              <Card className="flex aspect-video items-center justify-center p-6">
                <span className="text-4xl font-semibold">{index + 1}</span>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
};
export default CarouselComponent;

Custom starting index

If you want to start the carousel at a specific index, you can use the startIndex prop.

Default carousel

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
  Card,
} from "pol-ui";
 
import React from "react";
 
const CarouselComponent = () => {
  return (
    <Carousel options={{ startIndex: 3 }}>
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="p-1">
              <Card className="flex aspect-video items-center justify-center p-6">
                <span className="text-4xl font-semibold">{index + 1}</span>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
};
export default CarouselComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

export interface CarouselTheme {
  root: {
    base: string;
    controlsBase: string;
    leftControl: string;
    rightControl: string;
  };
  indicators: {
    active: IBoolean;
    base: string;
    wrapper: string;
  };
  item: {
    base: string;
    wrapper: IBoolean;
  };
  control: {
    base: string;
    icon: string;
  };
  scrollContainer: {
    base: string;
    snap: string;
  };
}