Title: Conobe Before & After Image Slider Author: Conobe Published: September 19, 2026 Last modified: September 19, 2026 --- Search plugins ![](https://ps.w.org/conobe-before-and-after-image-slider/assets/banner-772x250. png?rev=3703528) ![](https://ps.w.org/conobe-before-and-after-image-slider/assets/icon-256x256.png? rev=3703528) # Conobe Before & After Image Slider By [Conobe](https://profiles.wordpress.org/benhall14/) [Download](https://downloads.wordpress.org/plugin/conobe-before-and-after-image-slider.1.0.0.zip) * [Details](https://wordpress.org/plugins/conobe-before-and-after-image-slider/#description) * [Reviews](https://wordpress.org/plugins/conobe-before-and-after-image-slider/#reviews) * [Installation](https://wordpress.org/plugins/conobe-before-and-after-image-slider/#installation) * [Development](https://wordpress.org/plugins/conobe-before-and-after-image-slider/#developers) [Support](https://wordpress.org/support/plugin/conobe-before-and-after-image-slider/) ## Description Creating a beautiful Before & After slider couldn’t be any simpler. You can create sliders in one of two ways: 1. **Before & After > Generator** — 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 — all with a live drag-to-compare preview. Click “Generate Shortcode” and copy the result anywhere. 2. **Classic editor button** — 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. **That’s it!** — everything is delivered as one shortcode you can drop into any post, page, widget, block or template that runs shortcodes. ### Features ✅ **Clickable Slider** – Click anywhere on the slider to reveal image areas without dragging. ✅ **Slider Movement on Mouse Hover** – Toggle on/off to let the slider handle follow mouse movement automatically. ✅ **Customizable Labels** – Turn ‘Before’ and ‘After’ labels on or off, edit label text, and customize text and background colors. ✅ **Horizontal & Vertical Orientation** – Choose whether the slider reveals content left-to-right or top-to-bottom. ✅ **Default Start Positions** – Set a custom starting offset percentage for the slider handle. ✅ **Dimensions & Aspect Ratios** – Define width in px, %, or auto, and lock aspect ratios (16:9, 4:3, 1:1, 21:9, 3:4) for consistent formatting. ✅ **Styling Adjustments** – Fine-tune corner radius and drop shadow effects for the slider container. ✅ **Customizable Divider & Handle** – Customize divider bar color/width, handle size/background/border, icon color, and choose from 5 preset icons (or remove the icon entirely). ✅ **Simple Visual Generator** – Built-in visual builder with instant preview and automatic shortcode generation—no code or development knowledge required. ✅ **Media & Widget Integration** – Fully compatible with the standard WordPress Media Library and dedicated WordPress widgets. ✅ **SEO & Speed Optimized** – Set image alt tags, enable lazy loading, and use responsive srcset output. ✅ **Page Builder Support** – Works seamlessly via shortcodes in Gutenberg, Elementor, WPBakery, Divi, and any page builder that accepts shortcodes. ✅ **Unlimited Sliders** – Create as many standard sliders as you need. 🚀 **PRO Upgrades** ✅ (PRO) – Grouped Sliders: Build responsive slider grids or columns (e.g., 3×3 grids for 9 sliders) with shortcode support and customizable grid options (column counts, CTA buttons, and styling). ✅ (PRO) – Filterable Groups: Assign child groups to parent groups to display interactive filter buttons above your slider grids. ✅ (PRO) – Saved & Searchable Sliders: Save sliders in the WordPress dashboard for quick updates and search through saved items. ✅ (PRO) – Video Sliders: Create before-and-after transitions using two synchronized videos or a mix of images and video. ✅ (PRO) – Embed Video Sliders: Use YouTube, Vimeo, or third-party embed codes instead of self-hosted video files. ✅ (PRO) – Single Image Sliders: Apply CSS transformation filters (grayscale, invert, saturation, brightness, opacity, sepia, contrast) to a single image. ✅ (PRO) – Custom Watermarks: Upload custom watermark images, toggle them on or off, and position them in one of 9 placement zones. ✅ (PRO) – Scrollable Slider: Tie the reveal transition directly to page scrolling so the image unfolds as visitors scroll down. ✅ (PRO) – Auto Slider: Automatically slide back and forth with customizable duration and looping options. ✅ (PRO) – Label Positioning: Advanced placement controls for ‘Before’ and ‘After’ text labels. ✅ (PRO) – Custom CSS: Save custom CSS styling rules individually on a per-slider basis. ✅ (PRO) – Plugin Updates & Priority Support: Access all plugin updates and priority technical support throughout your active license period. ### Credits This plugin is created and maintained by [Conobe](https://conobe.co.uk). ## Screenshots [⌊Generator Preview⌉⌊Generator Preview⌉[ Generator Preview [⌊Easy Media Selection from WordPress media⌉⌊Easy Media Selection from WordPress media⌉[ Easy Media Selection from WordPress media [⌊Layout customisation⌉⌊Layout customisation⌉[ Layout customisation [⌊Divider & handle customisation⌉⌊Divider & handle customisation⌉[ Divider & handle customisation [⌊Label customisation⌉⌊Label customisation⌉[ Label customisation [⌊Live preview as you make edits⌉⌊Live preview as you make edits⌉[ Live preview as you make edits [⌊Example generated shortcode⌉⌊Example generated shortcode⌉[ Example generated shortcode [⌊Shortcode in default editor⌉⌊Shortcode in default editor⌉[ Shortcode in default editor [⌊Frontend render of a slider⌉⌊Frontend render of a slider⌉[ Frontend render of a slider [⌊Shortcode in Gutenberg Block⌉⌊Shortcode in Gutenberg Block⌉[ Shortcode in Gutenberg Block ## Installation 1. Upload the `conobe-before-and-after-slider` folder to `/wp-content/plugins/`. 2. Activate the plugin through the “Plugins” screen in WordPress. 3. Go to **Before & After > Generator** to build your first slider, or use the classic- editor button directly in a post, then paste the shortcode wherever you need it. ## FAQ ### How do I display a before and after slider on my site? You can generate a slider shortcode in two ways: 1. Go to **Before & After > Generator** in your WordPress dashboard, customize your slider using the visual builder, and click “Generate Shortcode.” 2. If using the Classic Editor, click the “Before & After Slider” button next to “Add Media” to build and insert the shortcode directly. Copy and paste the generated shortcode into any post, page, widget area, or template. ### Does this plugin work with page builders like Elementor, Gutenberg, or Divi? Yes. The plugin outputs standard WordPress shortcodes, which means it works seamlessly with Gutenberg (Shortcode block), Elementor, Divi, WPBakery, Beaver Builder, and any other builder that supports shortcodes. ### Can I create vertical before and after sliders? Yes. In the visual generator, you can switch the orientation setting between Horizontal( left-to-right reveal) and Vertical (top-to-bottom reveal). ### Are the sliders mobile-friendly and responsive? Yes. The sliders are fully responsive, touch-enabled for mobile drag interactions, and support preset aspect ratios (16:9, 4:3, 1:1, etc.) to prevent layout shifts across different screen sizes. ### Can I compare videos instead of static images? Video comparison (including self-hosted videos, YouTube, and Vimeo) is available in **Conobe Before & After Image Slider Pro**. The free version supports standard image comparisons from your WordPress Media Library. ### How do I customize the divider line and handle colors? Inside the visual generator, you can adjust the divider bar color and width, handle size, handle background/border colors, icon colors, and select from 5 preset handle icons or disable the icon entirely. ### Where can I report a bug or request support? Please open a support thread on the official [WordPress.org Plugin Support Forum](https://wordpress.org/support/plugin/conobe-before-after-image-slider/) and include details about your setup, theme, and the issue you are experiencing. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Conobe Before & After Image Slider” is open source software. The following people have contributed to this plugin. Contributors * [ Conobe ](https://profiles.wordpress.org/benhall14/) [Translate “Conobe Before & After Image Slider” into your language.](https://translate.wordpress.org/projects/wp-plugins/conobe-before-and-after-image-slider) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/conobe-before-and-after-image-slider/), check out the [SVN repository](https://plugins.svn.wordpress.org/conobe-before-and-after-image-slider/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/conobe-before-and-after-image-slider/) by [RSS](https://plugins.trac.wordpress.org/log/conobe-before-and-after-image-slider/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.0 * Initial release: shortcode, admin generator, classic-editor modal, horizontal& vertical orientation. ## Meta * Version **1.0.0** * Last updated **7 hours ago** * Active installations **Fewer than 10** * WordPress version ** 5.3 or higher ** * Tested up to **7.1.1** * PHP version ** 7.2 or higher ** * Tags * [before after](https://wordpress.org/plugins/tags/before-after/)[image comparison](https://wordpress.org/plugins/tags/image-comparison/) [image slider](https://wordpress.org/plugins/tags/image-slider/)[shortcode](https://wordpress.org/plugins/tags/shortcode/) [transition](https://wordpress.org/plugins/tags/transition/) * [Advanced View](https://wordpress.org/plugins/conobe-before-and-after-image-slider/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/conobe-before-and-after-image-slider/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/conobe-before-and-after-image-slider/reviews/) ## Contributors * [ Conobe ](https://profiles.wordpress.org/benhall14/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/conobe-before-and-after-image-slider/) ## Donate Would you like to support the advancement of this plugin? [ Donate to this plugin ](https://conobe.co.uk/plugins/conobe-before-and-after-slider-pro)