Skip to content

Latest commit

 

History

History
38 lines (27 loc) · 886 Bytes

README.md

File metadata and controls

38 lines (27 loc) · 886 Bytes

BeforeAfterJs

BeforeAfterJs is a simple Javascript library to create the beautiful sliding effect of two images (It's mobile compatible). It has no dependency and is style-free.

example GIF

Usage

Include the script in your page:

<script type="text/javascript" src="before-after.min.js"></script>

Then create the container with:

    new beforeAfter({
        'el'     : 'div-id-on-the-dom', // or just the node object
        'before' : 'path/to/yourimage-before.jpg',
        'after'  : 'path/to/yourimage-after.jpg'
    });

You can also create a container simply with:

    <div data-before-after>
        <img src="path/to/yourimage-before.jpg">
        <img src="path/to/yourimage-after.jpg">
    </div>

To do

  • Write tests
  • Add some options for style