{"id":295691,"date":"2026-04-09T11:48:34","date_gmt":"2026-04-09T11:48:34","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/slidediff-easy-beforeafter-image-slider\/"},"modified":"2026-04-09T11:48:10","modified_gmt":"2026-04-09T11:48:10","slug":"slidediff-easy-beforeafter-image-slider","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/slidediff-easy-beforeafter-image-slider\/","author":23463304,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"6.9.4","requires":"5.8","requires_php":"7.4","requires_plugins":null,"header_name":"SlideDiff - Easy Before\/After Image Slider","header_author":"Sattive DevLabs","header_description":"Help your visitors see the transformation. SlideDiff provides a high-performance slider to compare two images side-by-side. Built with SEO and speed in mind, it uses minimal resources while offering full customization\u2014from vertical orientations to custom label colors.","assets_banners_color":"6981b0","last_updated":"2026-04-09 11:48:10","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/sattivedevlabs.com\/docs\/slidediff-easy-before-after-image-slider","header_author_uri":"https:\/\/www.sattivedevlabs.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":31,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"sattivedevlabs","date":"2026-04-09 11:48:10"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3502437,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3502437,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":3502437,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":3502437,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"The SlideDiff configuration dashboard with custom design and UI settings.","2":"A beautiful horizontal before and after slider on the frontend.","3":"A vertical before and after slider on the frontend.","4":"The SlideDiff slider list table with quick-copy shortcodes."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[130737,11620,6808,176050,2141],"plugin_category":[],"plugin_contributors":[258114],"plugin_business_model":[],"class_list":["post-295691","plugin","type-plugin","status-publish","hentry","plugin_tags-before-after-slider","plugin_tags-before-and-after","plugin_tags-comparison","plugin_tags-image-comparison","plugin_tags-image-slider","plugin_contributors-sattivedevlabs","plugin_committers-sattivedevlabs"],"banners":{"banner":"https:\/\/ps.w.org\/slidediff-easy-beforeafter-image-slider\/assets\/banner-772x250.jpg?rev=3502437","banner_2x":"https:\/\/ps.w.org\/slidediff-easy-beforeafter-image-slider\/assets\/banner-1544x500.jpg?rev=3502437","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/slidediff-easy-beforeafter-image-slider\/assets\/icon-128x128.png?rev=3502437","icon_2x":"https:\/\/ps.w.org\/slidediff-easy-beforeafter-image-slider\/assets\/icon-256x256.png?rev=3502437","generated":false},"screenshots":[],"raw_content":"\n

Help your visitors see the transformation with SlideDiff<\/strong>.<\/p>\n\n

Built with UI\/UX, SEO, and site speed in mind, SlideDiff provides a lightweight, high-performance slider to compare two images side-by-side. Whether you are a photographer showcasing edits, a contractor showing home renovations, or a designer displaying website redesigns, SlideDiff makes visual storytelling interactive and engaging.<\/p>\n\n

Unlike other slider plugins that bloat your site with heavy external libraries, SlideDiff uses clean, modern CSS and vanilla JavaScript to ensure zero layout shifts and lightning-fast load times.<\/p>\n\n

Key Features:<\/strong>\n* Orientation Control:<\/strong> Choose between Horizontal (left\/right) or Vertical (up\/down) sliding.\n* Touch & Mobile Optimized:<\/strong> Fluid swiping on phones and tablets.\n* Move on Hover:<\/strong> Optionally allow users to interact with the slider just by moving their mouse, no clicking required.\n* Performance First:<\/strong> Built-in lazy loading and the ability to select the exact WordPress image resolution (Thumbnail, Medium, Large, Full) to save bandwidth.\n* SEO Friendly:<\/strong> Custom Alt Text overrides for both the 'Before' and 'After' images.\n* Deep Customization:<\/strong> Fully customize the handle style (Arrows, Circle, Standard), handle color, label text, and label background colors to match your theme perfectly.\n* Shortcode Generator:<\/strong> Easily copy and paste the [slidediff]<\/code> shortcode anywhere on your site, compatible with Gutenberg, Elementor, and all major page builders.<\/p>\n\n

Brought to you by Sattive Dev Labs<\/a>.<\/p>\n\n\n

    \n
  1. Upload the slidediff-easy-before-after-image-slider<\/code> folder to the \/wp-content\/plugins\/<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n
  2. Activate the plugin through the 'Plugins' screen in WordPress.<\/li>\n
  3. Navigate to the new SlideDiff<\/strong> menu in your WordPress admin dashboard.<\/li>\n
  4. Click Add New Slider<\/strong> to upload your Before and After images and configure your colors and settings.<\/li>\n
  5. Click Save Slider Settings<\/strong>.<\/li>\n
  6. Copy the generated shortcode (e.g., [slidediff id=\"123\"]<\/code>) and paste it into any post, page, or widget.<\/li>\n<\/ol>\n\n\n
    \n

    Does this work on mobile devices?<\/h3><\/dt>\n

    Yes! SlideDiff is built with native touch-action support, meaning users can seamlessly swipe the handle on smartphones and tablets.<\/p><\/dd>\n

    Will this slow down my website?<\/h3><\/dt>\n

    No. SlideDiff was built specifically to be lightweight. It uses pure CSS for clipping masks and vanilla JavaScript (no jQuery dependency) for interactions. It also includes native lazy-loading toggles and image resolution controls to keep your page sizes small.<\/p><\/dd>\n

    Can I change the colors to match my brand?<\/h3><\/dt>\n

    Absolutely. The custom configuration panel allows you to use a color picker to change the handle bar, arrows, label backgrounds, and label text to fit your exact brand guidelines.<\/p><\/dd>\n

    Does it work with Elementor or Gutenberg?<\/h3><\/dt>\n

    Yes. SlideDiff generates a standard WordPress shortcode that can be pasted into a Gutenberg Shortcode block, an Elementor Shortcode widget, or any other page builder.<\/p><\/dd>\n\n<\/dl>\n\n\n

    1.0.0<\/h4>\n\n
      \n
    • Initial Release. Features include horizontal\/vertical orientations, custom handle styles, lazy loading, and touch optimization.<\/li>\n<\/ul>","raw_excerpt":"Help your visitors see the transformation. SlideDiff provides a high-performance, touch-enabled slider to compare two images side-by-side.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/295691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=295691"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/sattivedevlabs"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=295691"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=295691"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=295691"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=295691"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=295691"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=295691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}