Draggable Before After

//cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/css/twentytwenty.css

by Rajdeep Chandra

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/css/twentytwenty.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/js/jquery.twentytwenty.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/js/jquery.event.move.js"></script>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
  <div class="twentytwenty-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" class="twentytwenty-after">
    <div class="twentytwenty-overlay">
      <div class="twentytwenty-before-label"></div>
      <div class="twentytwenty-after-label"></div>
    </div>
    <div class="twentytwenty-handle"><span class="twentytwenty-left-arrow"></span><span class="twentytwenty-right-arrow"></span></div>
  </div>
</div>

JavaScript

$(window).load(function() {
  $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({
    default_offset_pct: 0.7
  });
  $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({
    default_offset_pct: 0.3,
    orientation: 'vertical'
  });
});