Wopisanje
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
✅ (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.
Fota wobrazowki
Instalacija
- Upload the
conobe-before-and-after-sliderfolder to/wp-content/plugins/. - Activate the plugin through the „Plugins“ screen in WordPress.
- 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.
HSP
-
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 and include details about your setup, theme, and the issue you are experiencing.
Pohódnoćenja
Za tutón tykač pohódnoćenja njejsu.
Sobuskutkowarjo a wuwiwarjo
„Conobe Before & After Image Slider“ je softwara wotewrjeneho žórła. Slědowacy ludźo su k tutomu tykačej přinošowali.
Sobuskutkowarjo„Conobe Before & After Image Slider“ je so do 1 rěče přełožił. Dźakujemy so přełožowarjam za jich přinoški.
Přełožće „Conobe Before & After Image Slider“ do swojeje rěče.
Na wuwiću zajimowany?
Přehladajće kod, hladajće do SVN-repozitorija abo abonujće wuwiwanski protokol přez RSS.
Protokol změnow
1.0.0
- Initial release: shortcode, admin generator, classic-editor modal, horizontal & vertical orientation.










