Press "Enter" to skip to content

Before-After Image Comparison Slider Plugin In Pure JavaScript

Before-after plugin js is a simple before/after image comparison slider written in vanila javascript.

image comparison slider, before after image slider, before and after image slider, before after image slider

How to make use of it:

1. Load the stylesheet slider.css and JavaScript slider.js within the doc.

<link rel="stylesheet" href="./slider.css" />
<script src="./slider.js"></script>

2. Create an empty container for the image comparison slider.

<div id="slider" class="slider">
</div>

3. Initialize the slider and specify the trail to before/after pictures.

const slider = new Slider('slider', {
      after: 'after.jpeg',
      before: 'before.jpeg'
});

Before/After Comparison Slider Plugin/Github


See Demo And Download

Official Website(EugenyTR): Click Here

This superior jQuery/javascript plugin is developed by EugenyTR. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.