❤
npm
Sign UpSign In

before-after-slider

1.0.1 • Public • Published

BeforeAfterSlider

NPM Version LICENSE

中文 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.

Readme

Keywords

Package Sidebar

Install

npm i before-after-slider

Repository

github.com/VincentTV/before-after-slider

Homepage

github.com/VincentTV/before-after-slider#readme

Weekly Downloads

534

Version

1.0.1

License

MIT

Unpacked Size

57.6 kB

Total Files

14

Last publish

Collaborators

  • vincentfong
Try on RunKit
Report malware