Parallax-carousel-react NPM

React Parallax Carousel

A modern, customizable, and responsive React carousel component. Includes touch support, parallax effects, and many features.

Demo

link

🚀 Features

✨ Parallax effects
📱 Touch and swipe support
🎨 Customizable theme
🖼️ Thumbnail view
⌨️ Keyboard control
🔄 Autoplay
🎯 Dot navigation
➡️ Arrow controls
📝 Title and description support
📱 Fully responsive design

File Structure

parallax-carousel-react/
├── src/
│   ├── __tests__/
│   ├── components/
│   ├── types/
│   ├── index.ts
│   └── setupTests.ts
├── coverage/
├── README.md
├── jest.config.js
├── tsconfig.json
├── rollup.config.js
├── package.json
├── package-lock.json
└── .gitignore

📦 Installation

npm install parallax-carousel-react
# or
yarn add parallax-carousel-react

💻 Usage

import { ParallaxCarousel } from "parallax-carousel-react";

const App = () => {
	const images = [
		{
			url: "/path/to/image1.jpg",
			alt: "First Slide",
			title: "Title 1",
			description: "Description 1",
		},
		{
			url: "/path/to/image2.jpg",
			alt: "Second Slide",
			title: "Title 2",
			description: "Description 2",
		},
	];

	return (
		<ParallaxCarousel
			images={images}
			interval={1000}
			showArrows={true}
			showDots={true}
			showThumbnails={true}
			autoPlay={true}
			pauseOnHover={true}
			theme={{
				primary: "#007bff",
				secondary: "#6c757d",
				background: "#000",
				textColor: "#fff",
			}}
			effect="slide"
			height="500px"
			thumbnailPosition="bottom"
			showCaption={true}
			infinite={true}
			keyboardControl={true}
			onSlideChange={(index) => console.log(`Current slide: ${index}`)}
		/>
	);
};

🌟 Examples

Basic Usage

<ParallaxCarousel images={images} />

Full Customization

<ParallaxCarousel
	images={images}
	interval={3000}
	showArrows={true}
	showDots={true}
	showThumbnails={true}
	thumbnailPosition="left"
	effect="zoom"
	height="600px"
	showCaption={true}
	theme={customTheme}
/>

⚙️ Props

Prop	Type	Default	Description
images	Array	required	Array of images
interval	number	5000	Auto transition duration (ms)
showArrows	boolean	true	Show/hide arrow controls
showDots	boolean	true	Show/hide dot navigation
showThumbnails	boolean	false	Show/hide thumbnails
autoPlay	boolean	true	Auto play
pauseOnHover	boolean	true	Pause on hover
theme	CarouselTheme	undefined	Custom theme settings
effect	'slide' \| 'fade' \| 'zoom'	'slide'	Transition effect
height	string \| number	'500px'	Carousel height
thumbnailPosition	'top' \| 'bottom' \| 'left' \| 'right'	'bottom'	Thumbnail position
showCaption	boolean	false	Show title and description
infinite	boolean	true	Infinite loop
keyboardControl	boolean	true	Keyboard control
onSlideChange	function	undefined	Slide change callback

🔧 Type Definitions

interface CarouselImage {
	url: string;
	alt?: string;
	title?: string;
	description?: string;
}

interface CarouselTheme {
	primary?: string;
	secondary?: string;
	background?: string;
	textColor?: string;
}

🎨 Theme Customization

const theme = {
	primary: "#007bff", // Primary color
	secondary: "#6c757d", // Secondary color
	background: "#000", // Background color
	textColor: "#fff", // Text color
};
<ParallaxCarousel theme={theme} />;