distortion-effect-carousel v1.1.0

Distortion Effect Carousel

HTML carousel with distortion effect for React and Vanilla Javascript.\ Inspired by hover-effect.

DEMO

Install

With yarn.

yarn add distortion-effect-carousel

With NPM.

npm install distortion-effect-carousel

Basic usage

import React from 'react';
import { useDistortionEffectCarousel } from 'distortion-effect-carousel';

interface MyCarouselProps {
  images: string[];
  displacmentImage: string;
}

const MyCarousel: React.FC<MyCarouselProps> = ({
  displacmentImage,
  images,
}) => {
  const { ref, next, prev } = useDistortionEffectCarousel({
    images,
    displacmentImage,
  });

  // ... do something with next() and prev()
  return (
    <div
      style={{
        height: '350px',
      }}
      ref={ref}
    />
  );
};

Hook

Parameters

Return value