=== Conobe Before & After Image Slider ===
Contributors: benhall14
Tags: before after, image comparison, transition, image slider, shortcode
Requires at least: 5.3
Donate link: https://conobe.co.uk/plugins/conobe-before-and-after-slider-pro
Tested up to: 7.1
Requires PHP: 7.2
Stable tag: 1.0.0
License: GPLv3
License URI: http://www.gnu.org/licenses/gpl-3.0.html

Interactive before/after sliders (horizontal/vertical) with a visual generator, classic editor button, and simple shortcode output.

== 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 <a href="https://conobe.co.uk">Conobe</a>.

== 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.

== Frequently Asked Questions ==

= 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.

== 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

== Upgrade Notice ==
= 1.0.0 =
WordPress 7.1 Compatible

== Changelog ==

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