<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.event.move.js"></script>
<script src="jquery.twentytwenty.js"></script>
<link rel="stylesheet" href="twentytwenty.css" type="text/css" media="screen" />
<style>
body {
padding:0;
margin:0;
}
.twentytwenty-before-label::before,
.twentytwenty-after-label::before {
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id="container1" class="twentytwenty-container">
<img src="sotogordo-1945-recorte.jpeg">
<img src="sotogordo-2016-recorte.jpeg">
</div>
<script>
$(function(){
$("#container1").twentytwenty({
before_label: 'Antes',
after_label: 'Despúes'
});
});
</script>
</body>
</html>