Perfect Image Comparison Slider In vanilla javascript | sliderBeforeAfter

This is a perfect before-and-after slider for the web. Minimal Vanilla JavaScript image comparison slider for comparing before and after images when moving the mouse.

image comparison slider online, image comparison slider app, image comparison slider html, free image comparison slider, image comparison slider jquery

How to make use of it:

1. Create a container to hold the earlier than and after photos.

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

2. Insert the primary script into the doc.

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

3. Initialize the library to generate a primary comparability slider on the pictures.

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

4. Replace the default before/after photos.

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 picture comparability slider.

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

Minimal Image Comparison Slider For Web, slider Before After Plugin/Github, wordpress image comparison slider

See Demo And Download