Overview
The Carousel component provides navigation controls for carousels with support for dots, lines, and arrows variants.Basic Usage
- Code
- Preview
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
- Code
- Preview
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
- Code
- Preview
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
- Code
- Preview
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}
/>
);
}