Stylish jQuery Images Comparison Plugin - twentytwenty

File Size: 960 KB
Views Total: 19496
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Stylish jQuery Images Comparison Plugin - twentytwenty

twentytwenty is a clean and easy-to-use jQuery plugin that allows you to compare and showcase the difference between two images side by side.

See also:

How to use it:

1. Include required jQuery twentytwenty CSS in the header

<link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />

2. Insert 2 images to compare

<div class="demo"> 
<img src="img/1_1.jpg" /> 
<img src="img/1_2.jpg" /> 

3. Include jQuery library and jQuery twentytwenty plugin on the web page

<script src=""></script> 
<script src="js/jquery.twentytwenty.js"></script> 

4. Include required jquery.event.move.js script for 'movestart', 'move' and 'moveend' events

<script src="js/jquery.event.move.js"></script> 

5. Call the plugin with options.


  //  How much of the before image is visible when the page loads
  default_offset_pct: 0.5

  // or vertical
  orientation: 'horizontal',

  // label text
  before_label: 'Before',
  after_label: 'After',

  // enable/disable overlay
  no_overlay: false,

  // move with handle
  move_with_handle_only: true,

  // click to move
  click_to_move: false



  • Highlighted images in IE


  • Disabled finding overlay container


  • fix touchmove


  • fix touchmove



  • Support custom Before and After labels


  • Declared two previously undeclared variables. Allowing the slider to be executed in strict mode


  • set z-index of twenty-twenty container to 0

This awesome jQuery plugin is developed by zurb. For more Advanced Usages, please check the demo page or visit the official website.