react-standard-carousel v1.0.2

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} >

Example

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