{"id":372717,"date":"2026-09-22T07:54:47","date_gmt":"2026-09-22T07:54:47","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/minimal-beforeafter-compare\/"},"modified":"2026-09-22T07:54:19","modified_gmt":"2026-09-22T07:54:19","slug":"exindium-before-after-compare","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/exindium-before-after-compare\/","author":23498242,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.1.2","requires":"5.8","requires_php":"7.4","requires_plugins":null,"header_name":"Exindium Before\/After Compare","header_author":"Exindium","header_description":"A modular, lightweight Vanilla JS before\/after slider for visual comparisons.","assets_banners_color":"5f6d81","last_updated":"2026-09-22 07:54:19","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/www.exindium.com\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":55,"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":"exindium","date":"2026-09-22 07:54:19","revision":3706805}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3706800,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3706800,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3706831,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3706831,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":3706800,"resolution":"1","location":"assets","locale":"","width":1280,"height":720},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":3706800,"resolution":"2","location":"assets","locale":"","width":1280,"height":720},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":3706800,"resolution":"3","location":"assets","locale":"","width":1280,"height":720}},"screenshots":{"1":"The Slider Dashboard where you manage your image comparisons.","2":"The Live Editor with visual preview, media controls, layout settings, handle options, and label customization.","3":"A Before\/After comparison slider displayed on the frontend."}},"plugin_section":[],"plugin_tags":[11619,11620,152095,176050,2141],"plugin_category":[],"plugin_contributors":[281979],"plugin_business_model":[],"class_list":["post-372717","plugin","type-plugin","status-publish","hentry","plugin_tags-before-after","plugin_tags-before-and-after","plugin_tags-comparison-slider","plugin_tags-image-comparison","plugin_tags-image-slider","plugin_contributors-exindium","plugin_committers-exindium"],"banners":{"banner":"https:\/\/ps.w.org\/exindium-before-after-compare\/assets\/banner-772x250.png?rev=3706831","banner_2x":"https:\/\/ps.w.org\/exindium-before-after-compare\/assets\/banner-1544x500.png?rev=3706831","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/exindium-before-after-compare\/assets\/icon-128x128.png?rev=3706800","icon_2x":"https:\/\/ps.w.org\/exindium-before-after-compare\/assets\/icon-256x256.png?rev=3706800","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/exindium-before-after-compare\/assets\/screenshot-1.jpg?rev=3706800","caption":"The Slider Dashboard where you manage your image comparisons."},{"src":"https:\/\/ps.w.org\/exindium-before-after-compare\/assets\/screenshot-2.jpg?rev=3706800","caption":"The Live Editor with visual preview, media controls, layout settings, handle options, and label customization."},{"src":"https:\/\/ps.w.org\/exindium-before-after-compare\/assets\/screenshot-3.jpg?rev=3706800","caption":"A Before\/After comparison slider displayed on the frontend."}],"raw_content":"<!--section=description-->\n<p>Exindium Before\/After Compare is a lightweight way to showcase visual transformations on your WordPress site. Whether you are highlighting a home renovation, dental work, fitness progress, photo retouching, design changes, or any other before-and-after comparison, the plugin lets you create interactive sliders quickly without writing code.<\/p>\n\n<p>Sliders can be placed anywhere using a simple shortcode and work with Gutenberg, Elementor, Divi, Beaver Builder, WPBakery, and other themes or page builders that support WordPress shortcodes.<\/p>\n\n<p><strong>Live Visual Editor<\/strong>\nCreate and customize sliders from a dedicated admin interface with a sticky live preview. Changes to images, aspect ratio, labels, handle styles, alignment, and other display settings are reflected instantly while editing.<\/p>\n\n<p><strong>Lightweight by Design<\/strong>\nThe frontend is built with lightweight Vanilla JavaScript and has no jQuery dependency. Frontend assets are loaded only when a slider shortcode is rendered.<\/p>\n\n<h4>Features<\/h4>\n\n<ul>\n<li><strong>Live Visual Editor:<\/strong> Preview slider changes instantly while editing, including a single-image preview before the comparison is complete.<\/li>\n<li><strong>Zero jQuery Dependency:<\/strong> Built with lightweight Vanilla JavaScript.<\/li>\n<li><strong>Horizontal &amp; Vertical Modes:<\/strong> Create left\/right or top\/bottom image comparisons.<\/li>\n<li><strong>Handle Themes &amp; Styles:<\/strong> Choose Light or Dark divider themes and Classic (Circle) or Modern (Pill) handle styles.<\/li>\n<li><strong>Modern Label Styles:<\/strong> Choose Solid, Semi-Transparent, or Glass label backgrounds.<\/li>\n<li><strong>Custom Initial Position:<\/strong> Set the slider handle starting position from 0% to 100%.<\/li>\n<li><strong>Responsive Layout:<\/strong> Sliders adapt to different screen sizes and support touch interaction.<\/li>\n<li><strong>Keyboard Navigation:<\/strong> Slider handles can be controlled using the keyboard arrow keys.<\/li>\n<li><strong>Accessibility Features:<\/strong> Includes ARIA slider attributes, orientation information, keyboard controls, and accessible labels.<\/li>\n<li><strong>Custom Dashboard:<\/strong> Manage, edit, duplicate, and delete sliders from a dedicated admin screen, with automatic pagination for larger slider libraries.<\/li>\n<li><strong>Customizable UI:<\/strong> Adjust aspect ratio, border radius, label alignment, label visibility, and font size.<\/li>\n<li><strong>Shortcode Driven:<\/strong> Place sliders anywhere WordPress shortcodes are supported.<\/li>\n<li><strong>Multiple Sliders Per Page:<\/strong> Use multiple independent comparison sliders on the same page.<\/li>\n<li><strong>WPML &amp; Polylang Support:<\/strong> Translate custom Before and After labels on multilingual sites.<\/li>\n<\/ul>\n\n<h3>Multilingual Support<\/h3>\n\n<p>Exindium Before\/After Compare integrates with both WPML and Polylang.<\/p>\n\n<p>Slider configuration such as images, orientation, layout, handle style, and appearance is shared across languages. Only the custom \"Before\" and \"After\" labels are registered for language-specific translation.<\/p>\n\n<p>With WPML, these labels are available through String Translation under the \"MBAC Dynamic Labels\" domain.<\/p>\n\n<p>With Polylang, the labels are available through the Strings translations screen.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>exindium-before-after-compare<\/code> folder to the <code>\/wp-content\/plugins\/<\/code> directory, or install the plugin through the WordPress plugins screen.<\/li>\n<li>Activate the plugin through the \"Plugins\" screen in WordPress.<\/li>\n<li>Navigate to \"B\/A Sliders\" in the WordPress admin sidebar.<\/li>\n<li>Click \"+ Create New Slider\".<\/li>\n<li>Select both Before and After images and customize the slider.<\/li>\n<li>Save the slider.<\/li>\n<li>Copy the generated shortcode, for example <code>[mbac_before_after id=\"123\"]<\/code>, and paste it into any post, page, widget, or page builder shortcode element.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"do%20i%20need%20to%20know%20how%20to%20code%20to%20use%20this%3F\"><h3>Do I need to know how to code to use this?<\/h3><\/dt>\n<dd><p>No. The plugin includes a visual editor where you can upload images and configure the slider using standard controls. Once saved, copy the generated shortcode and place it wherever you want the slider to appear.<\/p><\/dd>\n<dt id=\"will%20this%20plugin%20slow%20down%20my%20website%3F\"><h3>Will this plugin slow down my website?<\/h3><\/dt>\n<dd><p>The plugin is designed to remain lightweight. The frontend uses Vanilla JavaScript with no jQuery dependency, and its frontend assets are only enqueued when a slider shortcode is rendered.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20my%20page%20builder%3F\"><h3>Does it work with my page builder?<\/h3><\/dt>\n<dd><p>Yes. Exindium Before\/After Compare uses a standard WordPress shortcode, so it can be used with Gutenberg and most page builders or themes that provide a shortcode block, widget, or element.<\/p>\n\n<p>Example:<\/p>\n\n<p>[mbac_before_after id=\"123\"]<\/p><\/dd>\n<dt id=\"can%20i%20use%20multiple%20sliders%20on%20the%20same%20page%3F\"><h3>Can I use multiple sliders on the same page?<\/h3><\/dt>\n<dd><p>Yes. Multiple slider shortcodes can be placed on the same page and each slider operates independently.<\/p><\/dd>\n<dt id=\"is%20the%20slider%20mobile-friendly%3F\"><h3>Is the slider mobile-friendly?<\/h3><\/dt>\n<dd><p>Yes. Sliders are responsive and support touch dragging on phones and tablets. Horizontal and vertical slider modes are both supported.<\/p><\/dd>\n<dt id=\"does%20the%20slider%20support%20keyboard%20navigation%3F\"><h3>Does the slider support keyboard navigation?<\/h3><\/dt>\n<dd><p>Yes. The slider handle can receive keyboard focus and can be moved using the arrow keys.<\/p><\/dd>\n<dt id=\"can%20i%20translate%20the%20%22before%22%20and%20%22after%22%20labels%3F\"><h3>Can I translate the \"Before\" and \"After\" labels?<\/h3><\/dt>\n<dd><p>Yes. You can define custom labels directly in the slider editor.<\/p>\n\n<p>On multilingual websites, the plugin integrates with WPML String Translation and Polylang Strings so those labels can be translated per language.<\/p><\/dd>\n<dt id=\"what%20happens%20to%20my%20sliders%20if%20i%20deactivate%20or%20delete%20the%20plugin%3F\"><h3>What happens to my sliders if I deactivate or delete the plugin?<\/h3><\/dt>\n<dd><p>Deactivating the plugin does not delete your slider data.<\/p>\n\n<p>By default, your sliders and settings are also preserved if the plugin is deleted. This allows your existing sliders to become available again if the plugin is reinstalled later.<\/p>\n\n<p>You can change this behavior from the Settings modal in the B\/A Sliders dashboard.<\/p>\n\n<p>Choose \"Keep Slider Data\" to preserve your sliders and settings after deletion, or choose \"Delete Data on Uninstall\" to permanently remove them when the plugin is deleted.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Exindium Before\/After Compare lets you create responsive image comparison sliders with a live visual editor and simple shortcode placement.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/372717","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=372717"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/exindium"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=372717"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=372717"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=372717"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=372717"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=372717"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=372717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}