You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

parallax-carousel-react

Package Overview
Dependencies
Maintainers
0
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

parallax-carousel-react

A modern, customizable, and responsive React carousel component with parallax effects

1.0.4
latest
Source
npmnpm
Version published
Weekly downloads
3
-80%
Maintainers
0
Weekly downloads
 
Created
Source

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

PropTypeDefaultDescription
imagesArrayrequiredArray of images
intervalnumber5000Auto transition duration (ms)
showArrowsbooleantrueShow/hide arrow controls
showDotsbooleantrueShow/hide dot navigation
showThumbnailsbooleanfalseShow/hide thumbnails
autoPlaybooleantrueAuto play
pauseOnHoverbooleantruePause on hover
themeCarouselThemeundefinedCustom theme settings
effect'slide' | 'fade' | 'zoom''slide'Transition effect
heightstring | number'500px'Carousel height
thumbnailPosition'top' | 'bottom' | 'left' | 'right''bottom'Thumbnail position
showCaptionbooleanfalseShow title and description
infinitebooleantrueInfinite loop
keyboardControlbooleantrueKeyboard control
onSlideChangefunctionundefinedSlide 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

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

🐛 Reporting Issues

Report issues via GitHub Issues.

Changelog

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

👤 Authors

🙏 Acknowledgements

Thanks to everyone who contributed to this project!

Keywords

react

FAQs

Package last updated on 18 Jan 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts