WordPress 7.1 Compatible<\/p>"},"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3703528,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3703528,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3703528,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3703528,"resolution":"1","location":"assets","locale":"","width":3084,"height":1750},"screenshot-10.png":{"filename":"screenshot-10.png","revision":3703528,"resolution":"10","location":"assets","locale":"","width":3124,"height":1580},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3703528,"resolution":"2","location":"assets","locale":"","width":1470,"height":602},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3703528,"resolution":"3","location":"assets","locale":"","width":1466,"height":816},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3703528,"resolution":"4","location":"assets","locale":"","width":1466,"height":1134},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3703528,"resolution":"5","location":"assets","locale":"","width":1466,"height":1092},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3703528,"resolution":"6","location":"assets","locale":"","width":1350,"height":1156},"screenshot-7.png":{"filename":"screenshot-7.png","revision":3703528,"resolution":"7","location":"assets","locale":"","width":1342,"height":350},"screenshot-8.png":{"filename":"screenshot-8.png","revision":3703528,"resolution":"8","location":"assets","locale":"","width":2460,"height":872},"screenshot-9.png":{"filename":"screenshot-9.png","revision":3703528,"resolution":"9","location":"assets","locale":"","width":1668,"height":990}},"screenshots":{"1":"Generator Preview","2":"Easy Media Selection from WordPress media","3":"Layout customisation","4":"Divider & handle customisation","5":"Label customisation","6":"Live preview as you make edits","7":"Example generated shortcode","8":"Shortcode in default editor","9":"Frontend render of a slider","10":"Shortcode in Gutenberg Block"}},"plugin_section":[],"plugin_tags":[11619,176050,2141,80,2104],"plugin_category":[43],"plugin_contributors":[279167],"plugin_business_model":[],"class_list":["post-365864","plugin","type-plugin","status-publish","hentry","plugin_tags-before-after","plugin_tags-image-comparison","plugin_tags-image-slider","plugin_tags-shortcode","plugin_tags-transition","plugin_category-customization","plugin_contributors-benhall14","plugin_committers-benhall14"],"banners":{"banner":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/banner-772x250.png?rev=3703528","banner_2x":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/banner-1544x500.png?rev=3703528","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/icon-256x256.png?rev=3703528","icon_2x":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/icon-256x256.png?rev=3703528","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/screenshot-1.png?rev=3703528","caption":"Generator Preview"},{"src":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/screenshot-2.png?rev=3703528","caption":"Easy Media Selection from WordPress media"},{"src":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/screenshot-3.png?rev=3703528","caption":"Layout customisation"},{"src":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/screenshot-4.png?rev=3703528","caption":"Divider & handle customisation"},{"src":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/screenshot-5.png?rev=3703528","caption":"Label customisation"},{"src":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/screenshot-6.png?rev=3703528","caption":"Live preview as you make edits"},{"src":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/screenshot-7.png?rev=3703528","caption":"Example generated shortcode"},{"src":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/screenshot-8.png?rev=3703528","caption":"Shortcode in default editor"},{"src":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/screenshot-9.png?rev=3703528","caption":"Frontend render of a slider"},{"src":"https:\/\/ps.w.org\/conobe-before-and-after-image-slider\/assets\/screenshot-10.png?rev=3703528","caption":"Shortcode in Gutenberg Block"}],"raw_content":"\n
Creating a beautiful Before & After slider couldn't be any simpler.<\/p>\n\n
You can create sliders in one of two ways:<\/p>\n\n
Before & After > Generator<\/strong> \u2014 a dedicated admin page with a full visual builder: pick your Before and After media, choose horizontal or vertical orientation, customise the divider bar colour\/width, the handle size\/colours, pick an icon, set label text and colours, corner radius, drop shadow, aspect ratio and width \u2014 all with a live drag-to-compare preview. Click \"Generate Shortcode\" and copy the result anywhere.<\/p><\/li>\n Classic editor button<\/strong> \u2014 a \"Before & After Slider\" button appears next to \"Add Media\" on the post\/page edit screen. It opens the same generator in a modal and inserts the shortcode at your cursor.<\/p><\/li>\n<\/ol>\n\n That's it!<\/strong> \u2014 everything is delivered as one shortcode you can drop into any post, page, widget, block or template that runs shortcodes.<\/p>\n\n \u2705 Clickable Slider<\/strong> - Click anywhere on the slider to reveal image areas without dragging.<\/p>\n\n \u2705 Slider Movement on Mouse Hover<\/strong> - Toggle on\/off to let the slider handle follow mouse movement automatically.<\/p>\n\n \u2705 Customizable Labels<\/strong> - Turn 'Before' and 'After' labels on or off, edit label text, and customize text and background colors.<\/p>\n\n \u2705 Horizontal & Vertical Orientation<\/strong> - Choose whether the slider reveals content left-to-right or top-to-bottom.<\/p>\n\n \u2705 Default Start Positions<\/strong> - Set a custom starting offset percentage for the slider handle.<\/p>\n\n \u2705 Dimensions & Aspect Ratios<\/strong> - Define width in px, %, or auto, and lock aspect ratios (16:9, 4:3, 1:1, 21:9, 3:4) for consistent formatting.<\/p>\n\n \u2705 Styling Adjustments<\/strong> - Fine-tune corner radius and drop shadow effects for the slider container.<\/p>\n\n \u2705 Customizable Divider & Handle<\/strong> - Customize divider bar color\/width, handle size\/background\/border, icon color, and choose from 5 preset icons (or remove the icon entirely).<\/p>\n\n \u2705 Simple Visual Generator<\/strong> - Built-in visual builder with instant preview and automatic shortcode generation\u2014no code or development knowledge required.<\/p>\n\n \u2705 Media & Widget Integration<\/strong> - Fully compatible with the standard WordPress Media Library and dedicated WordPress widgets.<\/p>\n\n \u2705 SEO & Speed Optimized<\/strong> - Set image alt tags, enable lazy loading, and use responsive srcset output.<\/p>\n\n \u2705 Page Builder Support<\/strong> - Works seamlessly via shortcodes in Gutenberg, Elementor, WPBakery, Divi, and any page builder that accepts shortcodes.<\/p>\n\n \u2705 Unlimited Sliders<\/strong> - Create as many standard sliders as you need.<\/p>\n\n \ud83d\ude80 PRO Upgrades<\/strong><\/p>\n\n \u2705 (PRO) - Grouped Sliders: Build responsive slider grids or columns (e.g., 3\u00d73 grids for 9 sliders) with shortcode support and customizable grid options (column counts, CTA buttons, and styling).<\/p>\n\n \u2705 (PRO) - Filterable Groups: Assign child groups to parent groups to display interactive filter buttons above your slider grids.<\/p>\n\n \u2705 (PRO) - Saved & Searchable Sliders: Save sliders in the WordPress dashboard for quick updates and search through saved items.<\/p>\n\n \u2705 (PRO) - Video Sliders: Create before-and-after transitions using two synchronized videos or a mix of images and video.<\/p>\n\n \u2705 (PRO) - Embed Video Sliders: Use YouTube, Vimeo, or third-party embed codes instead of self-hosted video files.<\/p>\n\n \u2705 (PRO) - Single Image Sliders: Apply CSS transformation filters (grayscale, invert, saturation, brightness, opacity, sepia, contrast) to a single image.<\/p>\n\n \u2705 (PRO) - Custom Watermarks: Upload custom watermark images, toggle them on or off, and position them in one of 9 placement zones.<\/p>\n\n \u2705 (PRO) - Scrollable Slider: Tie the reveal transition directly to page scrolling so the image unfolds as visitors scroll down.<\/p>\n\n \u2705 (PRO) - Auto Slider: Automatically slide back and forth with customizable duration and looping options.<\/p>\n\n \u2705 (PRO) - Label Positioning: Advanced placement controls for 'Before' and 'After' text labels.<\/p>\n\n \u2705 (PRO) - Custom CSS: Save custom CSS styling rules individually on a per-slider basis.<\/p>\n\n \u2705 (PRO) - Plugin Updates & Priority Support: Access all plugin updates and priority technical support throughout your active license period.<\/p>\n\nFeatures<\/h3>\n\n
Credits<\/h3>\n\n