It is a very simple jQuery plugin that will meet your needs.
See the demo content of the data from the link.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="cndk.beforeafter.js"></script>
<link href="cndk.beforeafter.css" rel="stylesheet">
<div class="beforeimagetest">
<div data-type="data-type-image">
<div data-type="before"><img src="images/a1.jpg"></div>
<div data-type="after"><img src="images/a2.jpg"></div>
</div>
</div>
$(".beforeimagetest").cndkbeforeafter(
{
showText: false,
seperatorColor: "blue",
seperatorWidth: "1px",
hoverEffect: false,
beforeText: "BEFORE",
afterText: "TEXT"
}
);
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.