OnurErtugral / React Image Comparison Slider
Licence: mit
A React component to compare images with a slider.
Stars: ✭ 43
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Image Comparison Slider
React Native Onboarding Swiper
🛳 Delightful onboarding for your React-Native app
Stars: ✭ 596 (+1286.05%)
Mutual labels: slider
Gravityslider
🔄 GravitySlider is a beautiful alternative to the standard UICollectionView flow layout.
Stars: ✭ 784 (+1723.26%)
Mutual labels: slider
Hammer Slider
DISCONTINUED - HammerSlider touch is a lightweight infinite carousel plugin.
Stars: ✭ 21 (-51.16%)
Mutual labels: slider
Slideview
An awesome sliding button library for Android.
Stars: ✭ 683 (+1488.37%)
Mutual labels: slider
React Native Circular Slider
React Native component for creating circular slider 🔘
Stars: ✭ 716 (+1565.12%)
Mutual labels: slider
Vue Concise Slider
vue-concise-slider,A simple vue sliding component
Stars: ✭ 831 (+1832.56%)
Mutual labels: slider
Hooper
🎠 A customizable accessible carousel slider optimized for Vue
Stars: ✭ 561 (+1204.65%)
Mutual labels: slider
Slendr
A responsive & lightweight (2KB gzipped) slider for modern browsers. [UNMAINTAINED]
Stars: ✭ 39 (-9.3%)
Mutual labels: slider
Slidetoact
A simple 'Slide to Unlock' Material widget for Android, written in Kotlin 📱🎨🦄
Stars: ✭ 783 (+1720.93%)
Mutual labels: slider
React Whirligig
A react carousel/slider like component for sequentially displaying slides or sets of slides
Stars: ✭ 20 (-53.49%)
Mutual labels: slider
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+68548.84%)
Mutual labels: slider
Glide
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more
Stars: ✭ 6,256 (+14448.84%)
Mutual labels: slider
M2 Msp owlcarousel2
This module lets you use OwnCarousel2 with Magento 2 throught requirejs
Stars: ✭ 16 (-62.79%)
Mutual labels: slider
React Slider
Accessible, CSS agnostic, slider component for React.
Stars: ✭ 627 (+1358.14%)
Mutual labels: slider
React Grid Carousel
React responsive carousel component w/ grid layout
Stars: ✭ 29 (-32.56%)
Mutual labels: slider
Splide
Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
Stars: ✭ 786 (+1727.91%)
Mutual labels: slider
Range Slider
The simplest JavaScript custom range slider ever!
Stars: ✭ 41 (-4.65%)
Mutual labels: slider
Egjs Flicking
🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
Stars: ✭ 937 (+2079.07%)
Mutual labels: slider
React Image Comparison Slider
Click above to play with the live demo.
Installation
npm install react-image-comparison-slider
or
yarn add react-image-comparison-slider
Usage
import ImageSlider from "react-image-comparison-slider";
<div style={{ width: 700, height: 450 }}>
<ImageSlider
image1=""
image2=""
onSlide={() => {
console.log("sliding");
}}
/>
</div>
Props
| Props | Type | Default | Description |
|---|---|---|---|
| image1 | string | - | First image's source (URL, base64 string etc.) |
| image2 | string | - | Second image's source (URL, base64 string etc.) |
| alt1 | string | "alt1" |
First image's alt text |
| alt2 | string | "alt2" |
Second image's alt text |
| sliderColor | string | "red" |
Slider's color. Should be valid CSS color expression. |
| sliderWidth | number | 3 | Slider's width in pixel. |
| showHandle | boolean | true | If false, hides slider handle. |
| handleBackgroundColor | string | "white" |
Background color of the slider's handle. |
| handleColor | string | "red" |
Background color of the triangles on the slider's handle. |
| customHandle | DOM Element | null | Renders the passed DOM element as a slider handle. |
| sliderInitialPosition | number | 0.5 | Slider's initial position between 0 and 1. |
| leftLabelText | string | null | A label for the first image. |
| rightLabelText | string | null | A label for the second image. |
| showPlaceholder | boolean | true | Placeholder is shown while waiting for full image to load |
| customPlaceholder | DOM Element | null | Pass your custom placeholder component/element. |
Callbacks
| Props | Type | Default | Description |
|---|---|---|---|
| onSlide | function | - | A callback function which is invoked on slider's position change. |
| onSlideEnd | function | - | A callback function which is invoked on mouseUp at the end of sliding. |
| onLoadFirstImage | function | - | Is invoked when the first image has finished loading. |
| onLoadSecondImage | function | - | Is invoked when the second image has finished loading. |
| onErrorFirstImage | function | - | Is invoked when an error occurs loading the first image. |
| onErrorSecondImage | function | - | Is invoked when an error occurs loading the second image. |
Animation
| Props | Type | Default | Description |
|---|---|---|---|
| animate | boolean | false | Animates slider. |
| animationCycleDuration | number | 5000 | Duration of animation in miliseconds. |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].