BeforeAfterSlider is a lightwe

BeforeAfterSlider

中文 README

BeforeAfterSlider is a lightweight Javascript library without any dependencies, to compare images in before/after view.

Support mousemove & touchmove. Lightweight, only 9KB. Adaptive width. Custom image, size & slider etc. Adaptive centering without any CSS. API simple and easy to use.

Demo

Online demo is available on the Github page.

Getting Started Support: Direct <script> include. NPM install. Compatible ES6(ES2015) ,CommonJS & AMD modules. Direct <script> include

CDN:

<script src="https://cdn.jsdelivr.net/npm/before-after-slider@1.0.0/dist/slider.bundle.js"></script>

If you use ES Modules, you can include by this：

<script type="module"> import SliderBar from "https://cdn.jsdelivr.net/npm/before-after-slider@1.0.0/dist/slider.bundle.js"; </script>

Using:

<div id="mySlider"></div> <script> new SliderBar({ el: '#mySlider', // The container, required beforeImg: './before.jpg', // before image, required afterImg: './after.jpg', // after image, required width: "90%", // slide-wrap width, default 100% height: "400px", // slide-wrap height, default image-height line: false, // Dividing line, default true lineColor: "rgba(0,0,0,0.5)" // Dividing line color, default rgba(0,0,0,0.5) }); </script> NPM install

npm install before-after-slider --save

Vue for example

<template> <div id="app"> <!-- container --> <div id="mySlider"></div> </div> </template> <script> import SliderBar from 'before-after-slider'; // import export default { name: 'app', mounted() { // new SliderBar({options}); new SliderBar({ el: '#mySlider', beforeImg: './before.jpg', afterImg: './after.jpg' }); } } </script> Options

Option	Type	defalut	Description
el	String	required	The container, "#sliderId"
beforeImg	String	required	before-image URL
afterImg	String	required	after-image URL
width	String	'100%'	slide-wrap width,(%,px,em,rem)
height	String	none	slide-wrap height
line	Boolean	true	Dividing line
lineColor	String	'rgba(0, 0, 0, .5)'	Dividing line color

By the way

Make sure the two images are the same size.

AND Welcome to visit my blog. https://vincef0ng.cn

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues,submit a new issues or feature request, participate in discussions, upvote or downvote the issues you like or dislike.

License

The MIT License.