{"id":25424,"date":"2016-01-04T21:01:56","date_gmt":"2016-01-04T13:01:56","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25424"},"modified":"2023-03-31T19:06:11","modified_gmt":"2023-03-31T11:06:11","slug":"js-image-comparison-sliders","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/","title":{"rendered":"5 Free Image Comparison Slider Scripts"},"content":{"rendered":"<p>Overlaid sliders allow you to make comparisons between two images, usually a before-after kind, with the two images superimposed on each other. A slider that can be manipulated can be dragged by the user to show less of the before image and more of the after image, and vice versa.<\/p>\n<p>It\u2019s the perfect way for certain scenarios such as viewing the harsh effects <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.theverge.com\/2014\/8\/20\/6046609\/its-hard-out-there-for-an-interplanetary-robot\">of Mars\u2019 atmosphere<\/a> or <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/iqc.ou.edu\/2014\/12\/12\/60yrsmidwest\/\">how city landscapes change<\/a> over a half of a century.<\/p>\n<p>For designers, it is also a great way to reflect on the amount of change a technique or approach has on an original image. There are various JS libraries you can use for comparison purposes. Here are 5 of them.<\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/zurb.com\/playground\/twentytwenty\">Twentytwenty<\/a><\/h2>\n<p><strong>Twentytwenty<\/strong> is visual tool to make it easy to note the differences between two images. This tool utilizing the jQuery and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/stephband\/jquery.event.move\">jquery.event.move<\/a> to work. It\u2019s very easy to use, just stack two images into a container, then call <code>twentytwenty();<\/code> for the container.<\/p>\n<pre>\r\n&lt;div id=\"container\"&gt;\r\n  &lt;img src=\"img-before.png\"&gt;\r\n  &lt;img src=\"img-after.png\"&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Then:<\/p>\n<pre>\r\n$(\"#container\").twentytwenty();\r\n<\/pre>\n<p>Twentytwenty is responsive and works for all devices, and if you use the Foundation framework, this will work out of the box.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/js-image-comparison-sliders\/twentytwenty.jpg\" alt=\"twentytwenty\" width=\"1000\" height=\"493\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/img-comparison-slider.sneas.io\/\">img-comparison-slider<\/a><\/h2>\n<p>img-comparison-slider pursues the following principles:<\/p>\n<ul>\n<li>Mobile-friendliness,<\/li>\n<li>Accessibility,<\/li>\n<li>Responsiveness,<\/li>\n<li>Compactness,<\/li>\n<li>Adjustability, and <\/li>\n<li>Compatibility with modern JS frameworks<\/li>\n<\/ul>\n<p>It is also highly configurable and compatible with almost any web application or design system. The installation of the slider is as simple as adding HTML tags to a webpage:<\/p>\n<pre>\r\n&lt;img-comparison-slider&gt;\r\n  &lt;img slot=\"first\" src=\"https:\/\/img-comparison-slider.sneas.io\/demo\/images\/before.webp\"&gt;\r\n  &lt;img slot=\"second\" src=\"https:\/\/img-comparison-slider.sneas.io\/demo\/images\/after.webp\"&gt;\r\n&lt;\/img-comparison-slider&gt;\r\n<\/pre>\n<p><em>Try a demo below:<\/em><\/p>\n<p><iframe loading=\"lazy\" frameborder=\"0\" src=\"https:\/\/img-comparison-slider.sneas.io\/iframe-demo.html\" width=\"100%\" height=\"210\"><\/iframe><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/juxtapose.knightlab.com\/\">Juxtapose<\/a><\/h2>\n<p><strong>Juxtapose<\/strong> helps you compare two pieces of media (photos or GIF) and make it easy for you to highlight the change between the images over time. This plugin is easy to use and works on all devices. Just provide two images, then call the plugin with the available options.<\/p>\n<p>On the options, you may set the slider start position, set it vertical or horizontal, add label and credit, animation, and more.<\/p>\n<p><em>Try a demo below:<\/em><\/p>\n<p><iframe loading=\"lazy\" frameborder=\"0\" class=\"juxtapose\" width=\"100%\" height=\"380\" src=\"https:\/\/cdn.knightlab.com\/libs\/juxtapose\/latest\/embed\/index.html?uid=6ff26f9c-9e5c-11e5-a524-0e7075bba956\"><\/iframe><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/kavyasukumar\/imgSlider\">imgSlider<\/a><\/h2>\n<p><strong>imgSlider<\/strong> is a simple jQuery plugin to make image comparison slider. The use is simple and easy: after including its JS and CSS, wrap the images in div with the <code>left<\/code> class for the <em>before<\/em> image, and <code>right<\/code> class for the <em>after<\/em> image, then activate it by calling <code>.slider();<\/code>. The plugin\u2019s options include setting the initial position of the slider and adding\/showing instructions on the slider.<\/p>\n<pre>\r\n&lt;div class=\"slider responsive\"&gt;\r\n\t&lt;div class=\"left image\"&gt;\r\n\t\t&lt;img src=\"before.jpg\"\/&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"right image\"&gt;\r\n\t\t&lt;img src=\"after.jpg\"\/&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Call the plugin:<\/p>\n<pre>\r\n  $('.slider').slider();\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/js-image-comparison-sliders\/simple-image-slider.jpg\" alt=\"simple image slider\" width=\"1000\" height=\"565\"><\/figure>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/koenoe\/cocoen\">Cocoen<\/a><\/h2>\n<p><strong>Cocoen<\/strong> enables touch with the use of the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/benmajor\/jQuery-Touch-Events\/\">jQuery-Touch Event<\/a>. It\u2019s easy to apply due to an HTML structure similar to the <strong>Twentytwenty<\/strong> plugin. On the script stack, besides jQuery, you need to include the jQuery Touch Event library alongside this plugin.<\/p>\n<pre>\r\n&lt;div class=\"cocoen\"&gt;\r\n    &lt;img src=\"img\/before.jpg\" alt&gt;\r\n    &lt;img src=\"img\/after.jpg\" alt&gt;\r\n&lt;\/div&gt;\r\n\r\n$(document).ready(function(){\r\n    $('.cocoen').cocoen();\r\n});<\/pre>\n<p><em>Try a demo below:<\/em><\/p>\n<p><iframe loading=\"lazy\" frameborder=\"0\" width=\"100%\" height=\"520\" src=\"https:\/\/koenromers.com\/cocoen\/\"><\/iframe><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/CodyHouse\/image-comparison-slider\">Image Comparison Slider<\/a><\/h2>\n<p>CodyHouse made a demo of an image comparison slider with CSS3, jQuery, and some scripts to handle the drag event and to add mobile support. You can follow the full explanation and instructions of using this plugin <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codyhouse.co\/gem\/css-jquery-image-comparison-slider\/\">here<\/a> and see the demo <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codyhouse.co\/demo\/image-comparison-slider\/index.html\">here<\/a>.<\/p>\n<p><em>Try a demo below:<\/em><\/p>\n<p><iframe loading=\"lazy\" frameborder=\"0\" width=\"100%\" height=\"500\" src=\"https:\/\/codyhouse.co\/demo\/image-comparison-slider\/index.html\"><\/iframe><\/p>\n<h2>Here\u2019s a few more\u2026\u2019<\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/herrfugbaum\/cato.js\"><strong>Cato<\/strong><\/a><strong> \u2013 <\/strong>Other plugins need jQuery as dependency but <strong>Cato<\/strong> requires no dependency to work, making it a more lightweight library for image comparison sliders. The use is easy, just include Cato\u2019s CSS and JS library and follow its HTML structure.<\/p>\n<p>There are options available to apply on your slider, including adding a tooltip, changing slider direction, and even adding filter effects such as sepia and grayscale. However, you should note that Cato currently only has support for WebKit.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/jotform\/before-after.js\"><strong>Before After<\/strong><\/a><strong> \u2013 <\/strong>This is lightweight, fully responsive, and works on any layout and size. You can see the live demos on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/bamf\/pen\/jEpxOX\">Codepen<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/js-image-comparison-sliders\/before-after.gif\" alt=\"before-after\" width=\"700\" height=\"647\"><\/figure>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/dudleystorey\/pen\/EIKzk\"><strong>HTML5 Video Comparison Slider<\/strong><\/a><strong> \u2013 <\/strong>When another developers try to make comparison slider for images, then <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/dudleystorey\">Dudley Storey<\/a> apply the slider to video. To do work, he utilizes jQuery and just a few lines of code. See the demo on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/dudleystorey\/pen\/EIKzk\">Codepen<\/a> to see the action.<\/p>","protected":false},"excerpt":{"rendered":"<p>Overlaid sliders allow you to make comparisons between two images, usually a before-after kind, with the two images superimposed on each other. A slider that can be manipulated can be dragged by the user to show less of the before image and more of the after image, and vice versa. It\u2019s the perfect way for&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[4642],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>5 Free Image Comparison Slider Scripts - Hongkiat<\/title>\n<meta name=\"description\" content=\"Overlaid sliders allow you to make comparisons between two images, usually a before-after kind, with the two images superimposed on each other. A slider\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Free Image Comparison Slider Scripts\" \/>\n<meta property=\"og:description\" content=\"Overlaid sliders allow you to make comparisons between two images, usually a before-after kind, with the two images superimposed on each other. A slider\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-04T13:01:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-31T11:06:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/js-image-comparison-sliders\/twentytwenty.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-image-comparison-sliders\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-image-comparison-sliders\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"5 Free Image Comparison Slider Scripts\",\"datePublished\":\"2016-01-04T13:01:56+00:00\",\"dateModified\":\"2023-03-31T11:06:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-image-comparison-sliders\\\/\"},\"wordCount\":637,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-image-comparison-sliders\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/js-image-comparison-sliders\\\/twentytwenty.jpg\",\"keywords\":[\"Gallery and Slideshow\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-image-comparison-sliders\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-image-comparison-sliders\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-image-comparison-sliders\\\/\",\"name\":\"5 Free Image Comparison Slider Scripts - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-image-comparison-sliders\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-image-comparison-sliders\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/js-image-comparison-sliders\\\/twentytwenty.jpg\",\"datePublished\":\"2016-01-04T13:01:56+00:00\",\"dateModified\":\"2023-03-31T11:06:11+00:00\",\"description\":\"Overlaid sliders allow you to make comparisons between two images, usually a before-after kind, with the two images superimposed on each other. A slider\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-image-comparison-sliders\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-image-comparison-sliders\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-image-comparison-sliders\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/js-image-comparison-sliders\\\/twentytwenty.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/js-image-comparison-sliders\\\/twentytwenty.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/js-image-comparison-sliders\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Free Image Comparison Slider Scripts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Free Image Comparison Slider Scripts - Hongkiat","description":"Overlaid sliders allow you to make comparisons between two images, usually a before-after kind, with the two images superimposed on each other. A slider","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/","og_locale":"en_US","og_type":"article","og_title":"5 Free Image Comparison Slider Scripts","og_description":"Overlaid sliders allow you to make comparisons between two images, usually a before-after kind, with the two images superimposed on each other. A slider","og_url":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-01-04T13:01:56+00:00","article_modified_time":"2023-03-31T11:06:11+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/js-image-comparison-sliders\/twentytwenty.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"5 Free Image Comparison Slider Scripts","datePublished":"2016-01-04T13:01:56+00:00","dateModified":"2023-03-31T11:06:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/"},"wordCount":637,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/js-image-comparison-sliders\/twentytwenty.jpg","keywords":["Gallery and Slideshow"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/","url":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/","name":"5 Free Image Comparison Slider Scripts - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/js-image-comparison-sliders\/twentytwenty.jpg","datePublished":"2016-01-04T13:01:56+00:00","dateModified":"2023-03-31T11:06:11+00:00","description":"Overlaid sliders allow you to make comparisons between two images, usually a before-after kind, with the two images superimposed on each other. A slider","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/js-image-comparison-sliders\/twentytwenty.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/js-image-comparison-sliders\/twentytwenty.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/js-image-comparison-sliders\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"5 Free Image Comparison Slider Scripts"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6C4","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25424"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25424\/revisions"}],"predecessor-version":[{"id":65475,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25424\/revisions\/65475"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25424"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}