Simple Carousel

A simple react carousel with infinite loop 🎉

https://www.npmjs.com/package/@davistran86/carousel

Demo

Please visit: https://davistran86.github.io/react-simple-carousel/

Installation

npm

npm i @davistran86/carousel

yarn

yarn add @davistran86/carousel

Basic Usage

Simply import the package to your react web app and start using it.

import React from "react";
import ReactDOM from "react-dom";
import Carousel from "@davistran86/carousel";

const images = [
  "https://scontent-iad3-1.cdninstagram.com/vp/ccde6818ebdfd3c3b7adc7560c530acb/5E4E076F/t51.2885-15/e35/p1080x1080/70689682_376385253254078_5229751774392621716_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_cat=102",
  "https://scontent-iad3-1.cdninstagram.com/vp/abcdbf2da90524f3a86c2df4ec3833e5/5E59BF8E/t51.2885-15/e35/p1080x1080/69866420_1201968029995574_3061494835534077307_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_cat=102",
  "https://scontent-iad3-1.cdninstagram.com/vp/92c9ca9081e1acfb632a6d62dbbea6f8/5E5E3670/t51.2885-15/e35/p1080x1080/70890914_170814634050132_6309691029590448199_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_cat=100",
  "https://scontent-iad3-1.cdninstagram.com/vp/df768c309299c9c4a9b5f15a42e7f7d4/5E5D3206/t51.2885-15/e35/p1080x1080/67897824_113471973161444_1774742288689415740_n.jpg?_nc_ht=scontent-iad3-1.cdninstagram.com&_nc_cat=108"
];

function App() {
  return (
    <div className="App">
      <Carousel>
        {images.map((image, index) => {
          return <img key={index} alt="images" src={image} />;
        })}
      </Carousel>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Advanced Usage

Effect

There are 2 effects can be used: slide, fade.

<Carousel effect="fade">...</Carousel>

| Option | Type | Default | Value | Info | | ------ | ------ | ------- | ---------- | ------------------------------------- | | effect | string | slide | slide,fade | Effect showing when go to other slide |

Speed

<Carousel speed={500}>...</Carousel>

| Option | Type | Default | Info | | ------ | ------ | ------- | ------------------------------------------------------------------------ | | speed | number | 250 | Changing slide speed. Default 250 means 250ms or 0.25s (Animation speed) |

Width & height

<Carousel width="800px" height="600px">
  ...
</Carousel>

| Option | Type | Default | Info | | ------ | ------ | ------- | ----------------------------------------------------------------- | | width | string | 100% | Carousel width. Support any value can be used with width in css | | height | string | 100% | Carousel height. Support any value can be used with height in css |

Fit width & height

Show content in full width or full height. In default, the content will be showed in full height.

| Option | Type | Default | Info | | --------- | ------- | ------- | ----------- | | fitWidth | boolean | false | Full width | | fitHeight | boolean | true | Full height |

Background

| Option | Type | Default | Info | | ---------- | ------ | ------- | -------------------------------------------------------------------------------- | | background | string | #ffffff | Background color of slides. Support any value can be used with background in css |

Autoplay

<Carousel autoplay={true} pauseOnMouseOver={true} delay={3000}>
  ...
</Carousel>

| Option | Type | Default | Info | | ---------------- | ------- | ------- | ---------------------------------------------------------------------- | | autoplay | boolean | false | Auto go to next slide | | delay | number | 5000 | Waiting time before go to next slide. Default 5000 means 5000ms or 5s | | pauseOnMouseOver | boolean | false | Pause autoplay when mouse over the Carousel |

Controller

<Carousel
  useArrowKey={true}
  useMouseWheel={true}
  hideController={true}
  buttonColor="red"
  buttonPosition="outside"
>
  ...
</Carousel>

| Option | Type | Default | Value | Info | | -------------- | ------- | ------- | -------------- | ----------------------------------------------------------- | | useArrowKey | boolean | false | true,false | Use arrow key to move to next or previous slide | | useMouseWheel | boolean | false | true,false | Use mouse wheel to move to next or previous slide | | hideController | boolean | false | true,false | Hide next and previous button | | buttonColor | string | #000 | any | Support any value can be used with color in css | | buttonPosition | string | inside | inside,outside | Next and previous button are inside or outside the carousel |

Indicators

<Carousel hideIndicators={true} indicatorsColor="red">
  ...
</Carousel>

| Option | Type | Default | Value | Info | | --------------- | ------- | ------- | ---------- | ----------------------------------------------- | | hideIndicators | boolean | false | true,false | Hide the indicators | | indicatorsColor | string | #000 | any | Support any value can be used with color in css |

Other react components

Checkout my other react components:

Notification

https://www.npmjs.com/package/@davistran86/notification