Image Comparison Slider

Image comparison slider component for React.

View This Demo  →

Download

NPM:

npm install image-comparison-slider-react

Yarn:

yarn add image-comparison-slider-react

Usage

<ImageComparisonSlider
  images={[
    {
      src: './image1.jpg',
      alt: 'First Image',
    },
    {
      src: './image2.jpg',
      alt: 'Second Image',
    },
  ]}
></ImageComparisonSlider>

Add Descriptive Text For Each Image

As seen in the example image at the beginning of this README, describe descriptive text can be added for each image. This can be done by adding the text property to each image object like so:

<ImageComparisonSlider
  images={[
    {
      src: './image1.jpg',
      alt: 'First Image',
      text: 'Before',
    },
    {
      src: './image2.jpg',
      alt: 'Second Image',
      text: 'After',
    },
  ]}
></ImageComparisonSlider>

Options

Additional options can be added via the options prop. Here's a list of possible options:

• color — color of the slider (default is #2188ff)
• iconColor — color of the slider icon (default is #fff)
• height — height of the image (default is 18.75rem)
• width — width of the image (default is 30rem),

Here's an example component with options:

<ImageComparisonSlider
  images={[
    {
      src: './image1.jpg',
      alt: 'First Image',
      text: 'Before',
    },
    {
      src: './image2.jpg',
      alt: 'Second Image',
      text: 'After',
    },
  ]}
  options={{
    color: 'yellow',
    iconColor: '#000',
    height: '250px',
    width: '350px',
  }}
></ImageComparisonSlider>

License

Image Comparison Slider is MIT Licensed.