{"id":259815,"date":"2025-11-13T14:41:07","date_gmt":"2025-11-13T14:41:07","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/before-after-slider\/"},"modified":"2025-11-19T17:04:29","modified_gmt":"2025-11-19T17:04:29","slug":"unique-before-after-slider","status":"publish","type":"plugin","link":"https:\/\/pcd.wordpress.org\/plugins\/unique-before-after-slider\/","author":8145988,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"0.1.0","stable_tag":"0.1.0","tested":"6.8.5","requires":"6.1","requires_php":"7.0","requires_plugins":null,"header_name":"Responsive Before After Slider Block by Unique Solution","header_author":"Hozefa Saleh","header_description":"Interactive before and after image comparison slider with responsive design.","assets_banners_color":"7eb5b4","last_updated":"2025-11-19 17:04:29","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":0,"downloads":155,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"0.1.0":{"tag":"0.1.0","author":"hozefasmile","date":"2025-11-19 17:04:29"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3399198,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3399198,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3399205,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":{"unique\/unique-before-after-slider":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"unique\/unique-before-after-slider","version":"0.1.0","title":"Responsive Before After Slider","category":"media","icon":"image-flip-horizontal","description":"Interactive before and after image comparison slider with responsive design.","example":{"attributes":{"beforeImage":{"url":"https:\/\/via.placeholder.com\/600x400\/cccccc\/969696?text=Before+Image","alt":"Before image placeholder"},"afterImage":{"url":"https:\/\/via.placeholder.com\/600x400\/969696\/cccccc?text=After+Image","alt":"After image placeholder"},"sliderColor":"#ffffff"}},"attributes":{"beforeImage":{"type":"object","default":{}},"afterImage":{"type":"object","default":{}},"sliderColor":{"type":"string","default":"#ffffff"}},"supports":{"html":false,"align":["wide","full"]},"textdomain":"unique-before-after-slider","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css","viewScript":"file:.\/view.js"}},"tagged_versions":["0.1.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3399198,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3399198,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3399198,"resolution":"3","location":"assets","locale":""},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3399198,"resolution":"4","location":"assets","locale":""}},"screenshots":{"1":"Desktop view showing vertical slider with before\/after images","2":"Mobile view displaying horizontal slider orientation","3":"Block editor interface with image upload placeholders","4":"Inspector controls showing color customization options"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[11619,1220,176050,606,611],"plugin_category":[],"plugin_contributors":[250919],"plugin_business_model":[],"class_list":["post-259815","plugin","type-plugin","status-publish","hentry","plugin_tags-before-after","plugin_tags-block","plugin_tags-image-comparison","plugin_tags-responsive","plugin_tags-slider","plugin_contributors-hozefasmile","plugin_committers-hozefasmile"],"banners":{"banner":"https:\/\/ps.w.org\/unique-before-after-slider\/assets\/banner-772x250.png?rev=3399205","banner_2x":"https:\/\/ps.w.org\/unique-before-after-slider\/assets\/banner-1544x500.png?rev=3399198","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/unique-before-after-slider\/assets\/icon-256x256.png?rev=3399198","icon_2x":"https:\/\/ps.w.org\/unique-before-after-slider\/assets\/icon-256x256.png?rev=3399198","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/unique-before-after-slider\/assets\/screenshot-1.png?rev=3399198","caption":"Desktop view showing vertical slider with before\/after images"},{"src":"https:\/\/ps.w.org\/unique-before-after-slider\/assets\/screenshot-2.png?rev=3399198","caption":"Mobile view displaying horizontal slider orientation"},{"src":"https:\/\/ps.w.org\/unique-before-after-slider\/assets\/screenshot-3.png?rev=3399198","caption":"Block editor interface with image upload placeholders"},{"src":"https:\/\/ps.w.org\/unique-before-after-slider\/assets\/screenshot-4.png?rev=3399198","caption":"Inspector controls showing color customization options"}],"raw_content":"<!--section=description-->\n<p>The Before After Slider block allows you to create stunning image comparisons that engage your visitors. Perfect for showcasing transformations, renovations, product improvements, or any visual changes over time.<\/p>\n\n<p><strong>Key Features:<\/strong><\/p>\n\n<ul>\n<li><strong>Dual Image Upload<\/strong>: Easy-to-use interface for uploading both \"Before\" and \"After\" images<\/li>\n<li><strong>Interactive Slider<\/strong>: Smooth drag-and-drop divider bar for seamless image comparison<\/li>\n<li><strong>Responsive Design<\/strong>: Automatically adapts between desktop and mobile layouts<\/li>\n<li><strong>Customizable Colors<\/strong>: Choose your preferred color for the slider divider and handle<\/li>\n<li><strong>Touch-Friendly<\/strong>: Optimized for both mouse and touch interactions<\/li>\n<li><strong>Accessibility Ready<\/strong>: Built with accessibility best practices in mind<\/li>\n<\/ul>\n\n<p><strong>Desktop Experience:<\/strong>\n- Vertical divider bar that slides left and right\n- Reveals more or less of the \"After\" image over the \"Before\" image\n- Smooth mouse drag interactions<\/p>\n\n<p><strong>Mobile Experience:<\/strong>\n- Automatically switches to horizontal divider bar on screens under 767px\n- Up and down sliding motion for touch-friendly interaction\n- Maintains smooth performance on mobile devices<\/p>\n\n<p>Perfect for:\n* Real estate before\/after renovations\n* Photography portfolio comparisons\n* Product transformation showcases\n* Website redesign comparisons\n* Medical or cosmetic procedure results\n* Landscape or architectural changes<\/p>\n\n<h3>Support<\/h3>\n\n<p>For support and feature requests, please visit our support forum or contact us through the plugin directory.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/unique-before-after-slider<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress<\/li>\n<li>Add the \"Before After Slider\" block to any post or page through the Gutenberg editor<\/li>\n<li>Upload your before and after images<\/li>\n<li>Customize the slider color to match your site's design<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id='what%20image%20formats%20are%20supported%3F'><h3>What image formats are supported?<\/h3><\/dt>\n<dd><p>The block supports all standard WordPress image formats including JPEG, PNG, GIF, and WebP.<\/p><\/dd>\n<dt id='can%20i%20customize%20the%20appearance%20of%20the%20slider%3F'><h3>Can I customize the appearance of the slider?<\/h3><\/dt>\n<dd><p>Yes! You can customize the color of the divider bar and handle through the block settings in the editor sidebar.<\/p><\/dd>\n<dt id='does%20it%20work%20on%20mobile%20devices%3F'><h3>Does it work on mobile devices?<\/h3><\/dt>\n<dd><p>Absolutely! The block automatically adapts to mobile devices by switching from a vertical to horizontal slider orientation for optimal touch interaction.<\/p><\/dd>\n<dt id='is%20the%20block%20accessible%3F'><h3>Is the block accessible?<\/h3><\/dt>\n<dd><p>Yes, the block is built with accessibility in mind and includes proper ARIA labels and keyboard navigation support.<\/p><\/dd>\n<dt id='can%20i%20use%20different%20sized%20images%3F'><h3>Can I use different sized images?<\/h3><\/dt>\n<dd><p>The block automatically handles different image dimensions and will scale them appropriately while maintaining the comparison functionality.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>0.1.0<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<li>Desktop vertical slider functionality<\/li>\n<li>Mobile horizontal slider adaptation<\/li>\n<li>Color customization options<\/li>\n<li>Responsive design implementation<\/li>\n<li>Touch and mouse interaction support<\/li>\n<\/ul>","raw_excerpt":"Interactive before and after image comparison slider with responsive design.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/259815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=259815"}],"author":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/hozefasmile"}],"wp:attachment":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=259815"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=259815"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=259815"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=259815"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=259815"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=259815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}