npm install --save react-pictures-carousel
yarn add react-pictures-carousel
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 |
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;