<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>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.