image-comparison-slider-react
Version:
Image comparison slider component for React.
101 lines (79 loc) • 2.04 kB
Markdown
# Image Comparison Slider
Image comparison slider component for React.
[](https://xtrp.github.io/ImageComparisonSlider/)
[View This Demo →](https://xtrp.github.io/ImageComparisonSlider/)
## Download
NPM:
```
npm install image-comparison-slider-react
```
Yarn:
```
yarn add image-comparison-slider-react
```
## Usage
```jsx
<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:
```jsx
<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:
```jsx
<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.