React carousel

A responsive React carousel component.

npm i @igor-j86/react-carousel

Latest version: Loading...

Standard mode

Code example

import { Carousel } from "@igor-j86/react-carousel"
// Available CSS (optional)
import "@igor-j86/react-carousel/lib/style/ijrc-carousel.css"

export const MyComponent = () => {
  return (
    <Carousel>
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
      <div>Slide 4</div>
      <div>Slide 5</div>
    </Carousel>
  )
}

Big thumbs mode

When setting the bigThumbs prop to true, the carousel displays larger thumbnails instead of small dots. It will also automatically set the first heading inside each slide as the thumbnail label, as well as the first image located (if any) as the thumbnail image.

Slide 1

Slide 2

Slide 3

Slide 4

Code example

import { Carousel } from "@igor-j86/react-carousel"
// Available CSS (optional)
import "@igor-j86/react-carousel/lib/style/ijrc-carousel.css"

export const MyComponent = () => {
return (
  <Carousel bigThumbs>
    <div>
      <h2>Slide 1</h2>
      <img src="https://picsum.photos/600/400?random=1" alt="Random 1" />
    </div>
    <div>
      <h2>Slide 2</h2>
      <img src="https://picsum.photos/600/400?random=2" alt="Random 2" />
    </div>
    <div>
      <h2>Slide 3</h2>
      <img src="https://picsum.photos/600/400?random=3" alt="Random 3" />
    </div>
    <div>
      <h2>Slide 4</h2>
      <img src="https://picsum.photos/600/400?random=4" alt="Random 4" />
    </div>
  </Carousel>
)
}