<div class="twtw-container">
<img src="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/img/1_1.jpg">
<img src="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/img/1_2.jpg">
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/css/twentytwenty.min.css" type="text/css" media="all">
<style>
.twtw-container,
.twtw-container img{
width: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/js/jquery.event.move.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/js/jquery.twentytwenty.min.js"></script>
<script>
(function(){
$(document).ready(
function() {
initialize_twentytwenty();
}
);
function initialize_twentytwenty(){
if($(".twtw-container").twentytwenty){
$(".twtw-container").twentytwenty();
}else{
setTimeout(function(){
initialize_twtw();
},250);
}
}
})();
</script>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.