react-pictures-carousel

Demo

Installation

---

npm

npm install --save react-pictures-carousel

yarn

yarn add react-pictures-carousel

Props

---

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;