Touch-enabled Image Comparison Slider - Cndk.BeforeAfter.Js

Cndk.BeforeAfter.Js is a tiny yet customizable and mobile-friendly image comparison slider plugin to quickly compare two pictures with mouse and touch events.

More Features:

• Compares the difference between 2 images with mouse drag, mouse hover and touch events.
• Light and dark themes.
• Automatically compares 2 images with a sliding comparison slider.
• Custom before/after text.
• Auto adapts the image comparison slider to the height of the image.

How to use it:

1. Load jQuery library and the Cndk.BeforeAfter.Js plugin's files in the HTML file.

<script src="/path/to/cdn/jquery.min.js"></script>
<link href="/path/to/cndk.beforeafter.css" rel="stylesheet" />
<script src="/path/to/cndk.beforeafter.js"></script>

2. Insert before/after images into the image comparison container.

<div class="beforeafterdefault">
  <div data-type="data-type-image">
    <div data-type="before"><img src="before.jpg"></div>
    <div data-type="after"><img src="after.jpg"></div>
  </div>
</div>

3. Attach the function cndkbeforeafter to the parent container and the plugin will do the rest.

$(function(){
  $(".beforeafterdefault").cndkbeforeafter();
});

4. Compare the images with mouse drag and touch swipe events. Default: 'hover'.

$(".beforeafterdefault").cndkbeforeafter({
  mode: "drag"
});

5. Determine whether or not to enable the 'Auto Compare' mode. Default: false.

$(".beforeafterdefault").cndkbeforeafter({
  autoSliding: false,
  autoSlidingStopOnHover: true
});

6. Change the theme to 'Dark'.

$(".beforeafterdefault").cndkbeforeafter({
  theme: "dark"
});

7. Change the styles of the image comparison slider.

$(".beforeafterdefault").cndkbeforeafter({
  seperatorWidth: "4px",
  seperatorOpacity: "0.8"
});

8. Apply a shadow effect to the image comparison area on hover. Default: true.

$(".beforeafterdefault").cndkbeforeafter({
  hoverEffect: false
});

9. Apply a reveal animation to the image comparison area on page load. Default: false.

$(".beforeafterdefault").cndkbeforeafter({
  enterAnimation: true
});

10. Hide the before/after text if needed.

$(".beforeafterdefault").cndkbeforeafter({
  showText: false
});

11. Customize the position of the before/after text.

• top-left
• top-right
• bottom-left
• bottom-right

$(".beforeafterdefault").cndkbeforeafter({
  beforeTextPosition: "bottom-left",
  afterTextPosition: "bottom-right"
});

12. Customize the before/after text.

$(".beforeafterdefault").cndkbeforeafter({
  beforeText: "BEFORE",
  afterText: "AFTER"
});

13. Or via data-title attributes in case there are multiple instances on a page.

<div data-type="data-type-image">
  <div data-type="before" data-title="Green"><img src="before.jpg"></div>
  <div data-type="after" data-title="Red"><img src="after.jpg"></div>
</div>

Changelog:

2020-04-25

• Fixed Touch events on mobile.

---

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