About this plugin
Creating a beautiful Before & After slider couldn’t be any simpler.
You can create sliders in one of two ways:
-
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.
-
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
, 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.