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!