pure-react-carousel-thumbs

A simple carousel with no other dependencies with thumbnails.
A simple, customizable carousel component for React applications.
A customizable React carousel component with support for thumbnails, autoplay, swiping, and more.

Installation

npm install pure-react-carousel-thumbs

Usage

First, import the Carousel and CarouselThumbs components:

``
import { Carousel, CarouselThumbs } from 'pure-react-carousel-thumbs';

function App() {
const images = [
'https://your-image-url-1.jpg',
'https://your-image-url-2.jpg',
'https://your-image-url-3.jpg',
];

const [currentIndex, setCurrentIndex] = useState(0);

return (
<>

images={images}
currentIndex={currentIndex}
changeIndex={setCurrentIndex}
/>

);
}
``

Carousel Component

The Carousel component displays a carousel of images with customizable options.

Props

|Prop|Type|Default|Description|
|---|---|---|---|
|images |string[]|undefined|undefined An array of image URLs to display in the carousel.
|className|string|undefined|undefined Optional CSS class for the carousel container.
|changeOnClick|boolean|true|Whether to change the slide when clicking on it.
|cover|boolean|false|Whether to cover the entire carousel container otherwise background should scale with height set to auto.
|index|number|0|The initial index of the carousel.
|height|number|string|'auto'|The height of the carousel container.
|width|number|string|'100%'|The width of the carousel container.
|interval|number|0|The interval for autoplay (in milliseconds). Set to 0 to disable autoplay.
|animationDuration|number|500|The duration of the slide change animation (in milliseconds).
|autoPlay|boolean|false|Whether to enable autoplay.
|stopAutoPlayOnHover|boolean|false|Whether to stop autoplay when hovering over the carousel.
|swipe|boolean|true|Whether to enable swipe gestures.
|navButtonsAlwaysVisible|boolean|false|Whether to always show navigation buttons.
|navButtonsAlwaysInvisible|boolean|false|Whether to never show navigation buttons.

CarouselThumbs Component

The CarouselThumbs component displays a row of thumbnail images that can be clicked to change the current slide in the main carousel.

Props

|Prop|Type|Default|Description|
|---|---|---|---|
|images|string[] \| undefined|undefined|An array of image URLs to display as thumbnails.
|currentIndex|number|0|The index of the currently displayed image in the main carousel.
|changeIndex|(newIndex: number) => void|undefined|A function that changes the index of the currently displayed image in the main carousel.
|height|number \| string|'250px'|The height of the thumbnail images.
|width|number \| string|'250px'|The width of the thumbnail images.
|thumbsClassName|string|undefined|Optional CSS class for the thumbnail images.
|containerClassName|string|undefined|Optional CSS class for the thumbnails container.
|thumbStyle|React.CSSProperties|undefined|Optional style object for the thumbnail images.
|containerStyle|React.CSSProperties|undefined|Optional style object for the thumbnails container.