Conobe Before & After Image Slider

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.

1.0.0

• Initial release: shortcode, admin generator, classic-editor modal, horizontal & vertical orientation.