Description:
A responsive, accessible, touch-enabled Vue slider component for comparing before & after images on your app.
How to use it:
1. Import and register the image comparison slider.
import Vue from 'vue'; import App from './App.vue'; import { applyPolyfills, defineCustomElements, } from 'img-comparison-slider/loader'; Vue.config.productionTip = false; // Tell Vue to ignore all components defined in the test-components // package. The regex assumes all components names are prefixed // 'test' Vue.config.ignoredElements = [/test-\w*/]; // Bind the custom elements to the window object applyPolyfills().then(() => { defineCustomElements(window); }); new Vue({ render: (h) => h(App), }).$mount('#app');
2. Add before/after images to the image comparison slider component.
<img-comparison-slider> <img slot="before" width="100%" src="before.jpg"> <img slot="after" width="100%" src="after.jpg"> </img-comparison-slider>
3. Customize the slider styles as follows:
.slider-example { --handle-opacity: 0.5; --handle-opacity-active: 0.5; --handle-size: 60px; --divider-width: 4px; --divider-color: #ffa658; /* ... */ }
Preview:
Download Details:
Author: sneas
Live Demo: https://sneas.github.io/img-comparison-slider/#default
Download Link: https://github.com/sneas/img-comparison-slider/archive/master.zip
Official Website: https://github.com/sneas/img-comparison-slider
Install & Download: