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} />;

📱 Mobile Support

• Touch and swipe gestures
• Responsive design
• Mobile-friendly thumbnail view
• Touch-friendly controls

📄 License

MIT

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Create a Pull Request

🐛 Reporting Issues

Report issues via GitHub Issues.

Changelog

For a detailed list of changes, please see the CHANGELOG.md.

👤 Authors

• Melih Şahin & AI - GitHub

🙏 Acknowledgements

Thanks to everyone who contributed to this project!