Skip to content
Paramanu v0.1.0-alpha.0

Carousel

The Carousel displays content in a series of slides with navigation controls and indicator dots.

Basic Usage

Slide 1
Slide 2
import { Carousel, CarouselSlide, CarouselControl } from "@paramanu/disclosure-react"


export default function App() {
return (
  <Carousel aria-label="Example">
    <CarouselControl direction="prev" />
    <CarouselSlide active index={0} total={2}>Slide 1</CarouselSlide>
    <CarouselSlide index={1} total={2}>Slide 2</CarouselSlide>
    <CarouselControl direction="next" />
  </Carousel>
)
}
<div class="pm-carousel pm-carousel--horizontal pm-carousel--md" role="region" aria-roledescription="carousel" aria-label="Example">
<button class="pm-carousel__control pm-carousel__control--prev" aria-label="Previous slide">&lsaquo;</button>
<div class="pm-carousel__slide pm-carousel__slide--active" role="group" aria-roledescription="slide" aria-label="Slide 1 of 2">Slide 1</div>
<div class="pm-carousel__slide" role="group" aria-roledescription="slide" aria-label="Slide 2 of 2">Slide 2</div>
<button class="pm-carousel__control pm-carousel__control--next" aria-label="Next slide">&rsaquo;</button>
</div>