Before/After Comparison Slider In Pure JavaScript

Category: Image , Javascript | August 19, 2021
Author:EugenyTR
Views Total:391 views
Official Page:Go to website
Last Update:August 19, 2021
License:MIT

Preview:

Before/After Comparison Slider In Pure JavaScript

Description:

A minimal before/after image comparison slider written in modern JavaScript.

How to use it:

1. Load the stylesheet slider.css and JavaScript slider.js in the document.

<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 path to before/after images.

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

You Might Be Interested In:


Leave a Reply