πŸš€ Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more β†’
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
npm
Version published
Weekly downloads
2
-90%
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

  • Melih Şahin & AI - GitHub

πŸ™ 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