1.0.2 • Published 8 months ago
react-snap-infinite-carousel v1.0.2
react-snap-infinite-carousel
Smooth infinite carousel with css-scroll-snap - implemented with custom animation function
Example
Install
npm install react-snap-infinite-carousel --saveIf you prefer yarn then
yarn react-snap-infinite-carouselProps
| Property | Type | Default | Description | ||||
|---|---|---|---|---|---|---|---|
| childern (required) | React elements | [] | Words to type | ||||
| autoScroll | boolean | true | Auto scroll the carousel | ||||
| infiniteScroll | boolean | true | Infinite scrolling | ||||
| interval | number | 4 | Time between changing slides in seconds | ||||
| transitionTime | number | 1500 | Slide scroll transition time in ms | ||||
| easingFunction | string | 'ease' | Animation easing function - 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' |
Usage
import React from 'react'
import InfiniteCarousel from 'react-snap-infinite-carousel';
const Example = () => {
return <InfiniteCarousel>
<ImgWrapper>
<div>1</div>
<Image src={img} alt="" />
</ImgWrapper>
<ImgWrapper>
<div>2</div>
<Image src={img} alt="" />
</ImgWrapper>
<ImgWrapper>
<div>3</div>
<Image src={img} alt="" />
</ImgWrapper>
</InfiniteCarousel>
}
export default Example;License
MIT © mamanico1