Skip to main content

​
Overview

The Carousel component provides navigation controls for carousels with support for dots, lines, and arrows variants.

​
Basic Usage

import { Carousel } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function CarouselDots() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const totalItems = 5;

  return (
    <Carousel
      variant="dots"
      totalItems={totalItems}
      currentIndex={currentIndex}
      onItemClick={setCurrentIndex}
    />
  );
}

​
Variants

​
Dots

import { Carousel } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function CarouselDots() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const totalItems = 5;

  return (
    <Carousel
      variant="dots"
      totalItems={totalItems}
      currentIndex={currentIndex}
      onItemClick={setCurrentIndex}
    />
  );
}

​
Lines

import { Carousel } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function CarouselLines() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const totalItems = 5;

  return (
    <Carousel
      variant="lines"
      totalItems={totalItems}
      currentIndex={currentIndex}
      onItemClick={setCurrentIndex}
    />
  );
}

​
Arrows

import { Carousel } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function CarouselArrows() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const totalItems = 5;

  const handlePrevious = () => {
    setCurrentIndex((prev) => Math.max(0, prev - 1));
  };

  const handleNext = () => {
    setCurrentIndex((prev) => Math.min(totalItems - 1, prev + 1));
  };

  return (
    <Carousel
      variant="arrows"
      totalItems={totalItems}
      currentIndex={currentIndex}
      onItemClick={setCurrentIndex}
      onPrevious={handlePrevious}
      onNext={handleNext}
      previousDisabled={currentIndex === 0}
      nextDisabled={currentIndex === totalItems - 1}
    />
  );
}

​
Props