react-snap-infinite-carousel

Smooth infinite carousel with css-scroll-snap - implemented with custom animation function

Example

Install

npm install react-snap-infinite-carousel --save

If you prefer yarn then

yarn react-snap-infinite-carousel

Props

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'

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