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;