@notbaldrick/react-crossfade-carousel

Made with create-react-library

Install

npm install --save @notbaldrick/react-crossfade-carousel

yarn add @notbaldrick/react-crossfade-carousel

Showcase

Click here to view an example.

Usage

import CrossfadeCarousel from '@notbaldrick/react-crossfade-carousel'

function Example() {
  return (
    <CrossfadeCarousel
      interval={3000}
      transition={2000}
      images={[
        'https://picsum.photos/id/118/1500/1000',
        'https://picsum.photos/id/120/4928/3264',
        'https://picsum.photos/id/127/4032/2272'
      ]}
    />
  )
}

props.images

You can put as much or as few images in the array as you want.

<CrossfadeCarousel
  images={[
    'https://picsum.photos/id/118/1500/1000',
    'https://picsum.photos/id/120/4928/3264',
    'https://picsum.photos/id/127/4032/2272'
  ]}
/>

props.cycle

If TRUE the cycle prop will loop through all the images. You can set the cycle prop to FALSE to pause the cycling of images.

function example() {
  const [pause, setPause] = useState(false)

  return <CrossfadeCarousel cycle={pause} onClick={() => setPause(!pause)} />
}

props.interval

Interval is the time in milliseconds where the image is shown before transitioning to the next.

<CrossfadeCarousel interval={6900} />

props.transition

Transition is the time in milliseconds where one image transitions to the next.

<CrossfadeCarousel transition={4200} />

props.forceActiveImage

By default it's set to NULL, but if given a number the carousel will show the corresponding image. For example if given the value of 2 the carousel will show the third image in the array. If it's a TRUTHY value then the cycling of images will stop, even if the cycle prop is set to TRUE.

const images = [
  'https://picsum.photos/id/118/1500/1000',
  'https://picsum.photos/id/120/4928/3264',
  'https://picsum.photos/id/127/4032/2272'
]

function Example() {
  const [activeImage, setActiveImage] = useState(0)

  function nextImage() {
    setActiveImage(active === props.images.length - 1 ? 0 : active + 1)
  }

  function previousImage() {
    setActiveImage(activeImage === 0 ? images.length - 1 : active - 1)
  }

  return (
    <>
      <button onClick={nextImage}> Next Image </button>
      <button onClick={previousImage}> Previous Image </button>
      <CrossfadeCarousel images={images} forceActiveImage={activeImage} />
    </>
  )
}

props.imageProps

Add props to every image component.

<CrossfadeCarousel
  imageProps={{
    onClick: () => console.log('Heyo')
  }}
/>

props.imageStyles

Add inline styles to every image component.

<CrossfadeCarousel
  imageStyles={{
    filter: 'blur(2px)'
  }}
/>

API

Name	Required	Type	Default
images	no	array	[3 images]
cycle	no	boolean	true
interval	no	number	5000
transition	no	number	5000
forceActiveImage	no	number	null
imageProps	no	object	{}
imageStyles	no	object	{}

License

MIT © NotBaldrick