Minimal Image Comparison Slider For Web – sliderBeforeAfter

Preview:

Description:

A minimal Vanilla JavaScript image comparison slider to compare before & after images on mouse move.

How to use it:

1. Create a container to hold the before and after images.

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

2. Insert the main script into the document.

<script src=”index.js”></script>

3. Initialize the library to generate a basic comparison slider on the images.

let slider = new sliderBeforeAfter({
    class_name: 'slider'
});

4. Replace the default before/after images.

let slider = new sliderBeforeAfter({
    class_name: 'slider',
    src: 'before.jpg',
    src2: 'after.jpg'
});

5. Specify the width & height of the parent container.

let slider = new sliderBeforeAfter({
    class_name: 'slider',
    width: '500px',
    height: '4000px'
});

6. Customize the appearance of the image comparison slider.

let slider = new sliderBeforeAfter({
    class_name: 'slider',
    border_width: '2px',
    border_color: '#fff'
});