Before/After Comparison Slider In Pure JavaScript

Category: Image , Javascript | August 19, 2021
Views Total:414 views
Official Page:Go to website
Last Update:August 19, 2021


Before/After Comparison Slider In Pure JavaScript


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">

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