Package Exports

@notbaldrick/react-crossfade-carousel

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@notbaldrick/react-crossfade-carousel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@notbaldrick/react-crossfade-carousel

Made with create-react-library

Install

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

yarn add @notbaldrick/react-crossfade-carousel

Showcase

gif-0

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	{}