1.0.3 • Published 5 years ago
@davistran86/carousel v1.0.3
Simple Carousel
A simple react carousel with infinite loop 🎉
https://www.npmjs.com/package/@davistran86/carouselDemo
Please visit: https://davistran86.github.io/react-simple-carousel/
Installation
npm
npm i @davistran86/carouselyarn
yarn add @davistran86/carouselBasic 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