1.0.2 • Published 3 years ago
@snigo.dev/carousel v1.0.2
Carousel
Zero-dependencies awesome carousel react component for everyday use. Demo: https://carousel.snigo.dev
Usage
- Install the package
npm i @snigo.dev/carousel- Wrap stuff with Carousel component
<main>
<Carousel
onApproach={() => { /** Load more images */}}
onChange={(from, to) => { /** Keep track of the current slide showing */ }}
>
{
images.map((imageId: string) => (
<Image src={`https://source.unsplash.com/${imageId}/960x600`} width={960} height={600} key={imageId} />
))
}
</Carousel>
</main>- Enjoy the ride
Features
- Supports swiping by both mouse and touch interactions
- No configuration required to start, just wrap any number of components
- Slides can have interactive elements
- Url to particular slide can be passed as
https://myapp.com/#slides3
Props
| Prop name | Type | Default value | Description |
|---|---|---|---|
start | number | 0 | Starting index of the slide |
loop | boolean | false | Restarts the carousel after the last slide |
autoplay | number | 0 | Number of seconds to autoshow next slide or 0 to disable |
threshold | number | 40 | Number of pixels slided to trigger navigation to the next slide |
showDots | boolean | true | Shows dots at the bottom of the carousel |
showArrows | boolean | true | Shows arrows on both sides of the carousel |
allowSwipe | boolean | true | Allows swipe either by mouse or touch interaction |
allowDotClick | boolean | true | Allows navigation by clicking on the dot |
onStart | function | Callback to be called when carousel is rendered on the screen | |
onEnd | function | Callback to be called on the last slide | |
onApproach | function | Callback to be called slides are approaching the end | |
onChange | function | Callback to be called on every slide change |
Dimensions
Carousel is designed to be contained by parent, meaning it will always take full width and full height of the container. Same applies to the default slide size.