1.0.5 • Published 2 years ago
react-pictures-carousel v1.0.5
Demo
Installation
npm
npm install --save react-pictures-carouselyarn
yarn add react-pictures-carouselProps
| Name | Type | Default | Description |
|---|---|---|---|
| pictures | array of string | ||
| direction | string | left | (Optional) Enter left or right to determine the direcction of travel |
| height | string, number | 400 | (Optional) The value is reset to pixels if it is a number |
| width | string, number | 400 | (Optional) The value is reset to pixels if it is a number |
| borderRadius | string, number | 30 | (Optional) The value is reset to pixels if it is a number |
| space | string, number | 30 | (Optional) The value is reset to pixels if it is a number |
| velocity | number | 50 | (Optional) The value is reset to seconds |
| action | function | (Optional) Function that is executed when clicking on the image |
Examples
import React from 'react';
import Carousel from 'react-pictures-carousel';
import img1 from './assets/images/img1.jpg';
import img2 from './assets/images/img2.jpg';
import img3 from './assets/images/img3.jpg';
import img4 from './assets/images/img4.jpg';
const list = [img1, img2, img3, img4]
function App() {
return (
<div>
<Carousel pictures={list} />
</div>
);
}
export default App;import React from 'react';
import Carousel from 'react-pictures-carousel';
import img1 from './assets/images/img1.jpg';
import img2 from './assets/images/img2.jpg';
import img3 from './assets/images/img3.jpg';
import img4 from './assets/images/img4.jpg';
import icon from './assests/icon.png';
const list = [img1, img2, img3, img4]
function App() {
const handleClick = () =>{
// Execute a function
}
return (
<div>
<Carousel pictures={list} icon={icon}
direction='left'
height='600px' width={400}
borderRadius={30} space={30} velocity={70}
action={handleClick} />
</div>
);
}
export default App;