alexsoin / baSlider

baSlider - Before and after (image comparison) slider

baSlider - Before and after (image comparison) slider

Overlaid sliders allow you to make comparisons between two images before-after, with the two images superimposed on each other. A slider that can be manipulated, can be dragged by the user to show less of the before image and more of the after image, and vice versa.

Getting started

Include jQuery on your page if you don't already have it. You can use a CDN or the node_module

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Include the following lines on your page

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

HTML decoration for your images goes like this

<div class="comparison-slider-wrapper">
    <div id="ba-slider" class="comparison-slider">
            <div class="overlay">text</div>
            <img src="after.jpg"/>
        <div class="resize">
            <div class="overlay">text</div>
            <img src="before.jpg"/>
        </div>
        <div class="divider"></div>
    </div>
</div>

Include the following near the end of the page.

<script>
    $(document).ready(function () {
        baSlider("#ba-slider");
    });
</script>

Or if the page displays multiple sliders

<script>
    $(document).ready(function () {
        baSlider(".comparison-slider");
    });
</script>