Responsive jQuery Image Comparison Plugin: Before & After Viewer

Responsive jQuery Image Comparison Plugin: Before & After Viewer

Effective Web Design is using the right technology to showcase information. A “before and after” element should be responsive and resize according to the type of device it’s being viewed on and the user should be able to adjust which images is visible with either their mouse or their finger. 

One of the easiest & cleanest ways to implement responsive before and after image effects on your website is with an NPM package called “jquery-image-compare” written by @sylvaincombes. 

Google Earth / Getty Images

Implementing jquery-image-compare

Check out the official NPM instructions. Codepen available above compliments of Keystone Web Studios.

Using Before & After Element in WordPress

There is a plugin available on CodeCanyon for $17 that will allow you to do the same thing as above, however at the time of this post there were no working free plugins that were responsive and touch enabled without using a page builder. 

Resources

Keystone Web Studios

A Pennsylvania based IT consulting firm specializing in Wordpress & custom framework website / application development, ecommerce platforms, native mobile application development, SEO/SEM services, digital marketing management & technical support. Call us anytime! 855-942-0303

Leave a Reply