react-standard-carousel

this carousel is simple and minimum that use in many situations.

Tech

• Node.js
• React
• TypeScript
• webpack
• babel
• Jest
• enzyme
• use-interval

Installation

npm install [--save-dev] react-standard-carousel

Usage

import React from 'react';
import Carousel from 'react-standard-carousel';

const App = () => {
  return (
    <div style={{width: '400px', height: '600px'}}>
      <Carousel>
        <img src="/img/example1.jpg" />
        <img src="/img/example2.jpg" />
        <img src="/img/example3.jpg" />
      </Carousel>
    </div>
  );
}

export default App;

or

import React from 'react';
import { Link } from 'react-router-dom';
import Carousel from 'react-standard-carousel';

const App = () => {
  return (
    <div style={{width: '400px', height: '600px'}}>
      <Carousel>
        <div className="slide">
          <img src="/img/example1.jpg" />
          <Link to="/christmas" className="slide__title">
            MERRY CHRISTMAS
          </Link>
        </div>
        <div className="slide">
          <img src="/img/example2.jpg" />
          <Link to="/santa-claus" className="slide__title">
            Lets gift to Santa Claus
          </Link>
        </div>
      </Carousel>
    </div>
  );
}

export default App;

TypeScript:

import React from 'react';
import Carousel from 'react-standard-carousel';

const App: React.FC = () => {
  return (
    <div style={{width: '400px', height: '600px'}}>
      <Carousel>
        <img src="/img/example1.jpg" />
        <img src="/img/example2.jpg" />
        <img src="/img/example3.jpg" />
      </Carousel>
    </div>
  );
}

export default App;

Props

<Carousel
  dots={true}
  dotWidth={6}
  dotMargin={5}
  dotBorderWidth={2}
  arrow={true}
  arrowWidth={20}
  arrowBorderWidth={2}
  transition={300}
  autoPlay={true}
  autoPlayMsec={3000} >

| Props | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | [string|node] | | Yes | Children is a special React property. | | dots | boolean | true | No | Show dots or hide. | | dotWidth | number | 6 | No | Width and height of dot. unit is 'px'. | | dotMargin | number | 5 | No | Margin of dot. unit is 'px'. | | dotBorderWidth| number | 2 | No | Width of border for dot. unit is 'px'. | | arrow | boolean | true | No | Show arrow icon or hide. | | arrowWidth | number | 20 | No | Width and height of arrow icon. unit is 'px'. | | arrowBorderWidth | number | 2 | No | Width and height of border for arrow icon. unit is 'px'. | | transition | number | 300 | No | Time that during move carousel. unit is 'msec'. | | autoPlay | boolean | false | No | Start with auto. | | autoPlayMsec | number | 3000 | No | Interval. unit is 'msec'. |

Example

$ git clone git://github.com/hktysk/react-standard-carousel.git
$ cd react-standard-carousel
$ npm install
$ npm start