sneas / Img Comparison Slider
Licence: mit
Image comparison slider. Compare images before and after. Supports React, Vue, Angular.
Stars: ✭ 45
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Img Comparison Slider
React Native Circular Slider
React Native component for creating circular slider 🔘
Stars: ✭ 716 (+1491.11%)
Mutual labels: slider
Egjs Flicking
🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
Stars: ✭ 937 (+1982.22%)
Mutual labels: slider
Lwc
⚡️ LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation
Stars: ✭ 974 (+2064.44%)
Mutual labels: web-component
Gravityslider
🔄 GravitySlider is a beautiful alternative to the standard UICollectionView flow layout.
Stars: ✭ 784 (+1642.22%)
Mutual labels: slider
M2 Msp owlcarousel2
This module lets you use OwnCarousel2 with Magento 2 throught requirejs
Stars: ✭ 16 (-64.44%)
Mutual labels: slider
React Whirligig
A react carousel/slider like component for sequentially displaying slides or sets of slides
Stars: ✭ 20 (-55.56%)
Mutual labels: slider
React Zmage
一个基于 React 的可缩放图片控件 | A scalable image wrapper power by react
Stars: ✭ 713 (+1484.44%)
Mutual labels: slider
React Image Comparison Slider
A React component to compare images with a slider.
Stars: ✭ 43 (-4.44%)
Mutual labels: slider
Paper Timezone
Polymer based timezone selection component
Stars: ✭ 19 (-57.78%)
Mutual labels: web-component
Splide
Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
Stars: ✭ 786 (+1646.67%)
Mutual labels: slider
Vue Concise Slider
vue-concise-slider,A simple vue sliding component
Stars: ✭ 831 (+1746.67%)
Mutual labels: slider
Hammer Slider
DISCONTINUED - HammerSlider touch is a lightweight infinite carousel plugin.
Stars: ✭ 21 (-53.33%)
Mutual labels: slider
Slidetoact
A simple 'Slide to Unlock' Material widget for Android, written in Kotlin 📱🎨🦄
Stars: ✭ 783 (+1640%)
Mutual labels: slider
Slendr
A responsive & lightweight (2KB gzipped) slider for modern browsers. [UNMAINTAINED]
Stars: ✭ 39 (-13.33%)
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 (+13802.22%)
Mutual labels: slider
Vaadin Form Layout
The Web Component providing configurable responsive layout for form elements. Part of the Vaadin components.
Stars: ✭ 15 (-66.67%)
Mutual labels: web-component
Yjsliderview
方便快捷轻量级的SlideView接入，模仿UITableView的API实现接口。使用Frame和约束布局都很方便。所有需要的就两个文件YJSliderView的头文件和实现文件。
Stars: ✭ 43 (-4.44%)
Mutual labels: slider
Range Slider
The simplest JavaScript custom range slider ever!
Stars: ✭ 41 (-8.89%)
Mutual labels: slider
React Grid Carousel
React responsive carousel component w/ grid layout
Stars: ✭ 29 (-35.56%)
Mutual labels: slider
img-comparison-slider
Slider component for comparing images (before and after).
Usage examples: https://sneas.github.io/img-comparison-slider
Browsers support
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 iOS Safari |
 Samsung |
|---|---|---|---|---|---|
| IE11 (limited), Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Why yet another slider?
Because all existing solutions lack at least one of the features:
- Mobile friendly
- Accessible
- Responsive
- jQuery free
- Compatible with modern frameworks (React, Angular, Vue2, Vue3)
- Distributed through CDN or NPM
Installation
HTML
<script
type="module"
src="https://unpkg.com/[email protected]/dist/component/component.esm.js"
></script>
<script
nomodule=""
src="https://unpkg.com/[email protected]/dist/component/component.js"
></script>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/collection/styles/initial.css"
/>
<img-comparison-slider>
<img slot="before" src="before.jpg" />
<img slot="after" src="after.jpg" />
</img-comparison-slider>
Frameworks support
Styling
The component could be styled with the help of CSS3 variables.
Example:
<style type="text/css">
img-comparison-slider {
--divider-width: 2px;
--divider-color: #c0c0c0;
--handle-opacity: 0.3;
}
</style>
Available variables
| Variable | Description | Default value |
|---|---|---|
--divider-width |
Width of the vertical line dividing both images | 1px |
--divider-color |
Color of the vertical line dividing both images | #d7d7d7 |
--handle-size |
Size of the handle in the middle of divider | 40px |
--handle-color |
Color of the handle in the middle of divider | #d7d7d7 |
--handle-opacity |
Opacity of the handle | 0.5 |
--handle-opacity-active |
On focus opacity of the handle | 0 |
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].