A customizable 3D image slider React component
npm install react-3d-sliderbash
npm install react-3d-slider
`
Usage
`bash
import React from 'react';
import ImageSlider from 'react-3d-slider';
const App = () => {
const images = [
{ id: 1, path: 'https://example.com/image1.jpg' },
{ id: 2, path: 'https://example.com/image2.jpg' },
{ id: 3, path: 'https://example.com/image3.jpg' },
{ id: 4, path: 'https://example.com/image4.jpg' },
{ id: 5, path: 'https://example.com/image5.jpg' },
];
return (
3D Image Slider
width={400}
height={300}
autoRotateInterval={5000}
centerScale={1.2}
sideScale={0.8}
outerScale={0.6}
centerBlur={0}
sideBlur={2}
outerBlur={4}
/>
);
};
export default App;
`
Props
The ImageSlider component accepts the following props:
| Prop | Type | Default | Description |
|---------------------|---------|---------|---------------------------------------------------------------------------------|
| images | array | required| An array of image URLs to be displayed in the slider |
| width | number | 300 | Width of the slider container in pixels |
| height | number | 400 | Height of the slider container in pixels |
| autoRotateInterval| number | 10000 | Interval for automatic rotation in milliseconds |
| centerScale | number | 1 | Scale factor for the center image |
| sideScale | number | 0.8 | Scale factor for the side images |
| outerScale | number | 0.6 | Scale factor for the outer images |
| centerBlur | number | 0 | Blur amount for the center image in pixels |
| sideBlur | number | 1 | Blur amount for the side images in pixels |
| outerBlur | number | 2 | Blur amount for the outer images in pixels |
| onImageClick | number | 2 | Callback function when an image is clicked, receives the image id as an argument| |
Advanced Usage
`jsx
import React from 'react';
import ImageSlider from 'react-3d-slider';
const App = () => {
const images = [
{ id: 1, path: 'https://example.com/image1.jpg' },
{ id: 2, path: 'https://example.com/image2.jpg' },
{ id: 3, path: 'https://example.com/image3.jpg' },
{ id: 4, path: 'https://example.com/image4.jpg' },
{ id: 5, path: 'https://example.com/image5.jpg' },
];
const handleImageClick = (image) => {
console.log(image);
};
return (
Custom 3D Image Slider
width={500}
height={300}
autoRotateInterval={5000}
centerScale={1.2}
sideScale={0.8}
outerScale={0.5}
centerBlur={0}
sideBlur={2}
outerBlur={4}
onImageClick={handleImageClick}
/>
);
};
export default App;
``