@angelplayer/react-carousel
v1.0.0
Published
Super easy carousel component for react by AngelPlayer
Downloads
17
Maintainers
Readme
@angelplayer/react-carousel
This package is a "Super easy Carousel" component made by AngelPlayer.
It works in React and supports both JavaScript and TypeScript.
Install
$ npm i @angelplayer/react-carousel
Example
import { Carousel } from '@angelplayer/react-carousel';
function App() {
const slides = [
{ image: '/images/carousel1.jpg', url: 'https://angelplayer.tistory.com' },
{ image: '/images/carousel2.jpg', url: 'https://github.com/ssh5212' },
];
return (
<div style={{ width: '750px', height: '250px' }}>
<Carousel slides={slides} speed='5000' type='cover' />
</div>
);
}
The carousel is determined by the width and height of its parent.
In the example, the size of the carousel is being adjusted by the width and height of the parent div.
Props
The Carousel can accept three props:
slides
The slides prop is an array consisting of objects.
Each object contains an image and a URL. When you click on the image displayed in the Carousel, it will navigate to the corresponding URL.
speed
The speed prop adjusts the transition speed of the Carousel's images.
The unit is in milliseconds, and the default value is 5000ms.
type
The type prop determines how images are filled within the Carousel.
The type can be either "cover" or "contain".
If we use the above image as an example, "contain" ensures that the image is displayed without any parts being cropped. "cover" enlarges the image to fit exactly within the Carousel's dimensions.
The default value for type is "cover".
Video Usage Guide
Happy Hacking!